Redirect after new user confirmed their email address

Support
,
1

Hi. I’ve got an issue here with my code. What happens is that I can log in and out and see the login screen correctly using this code except for when I create a new user, get email confirmation link which opens new tab with the modal that says I’m logged in, except I am still on the log in route. I cannot figure out how to hook up the code to redirect the user so that when they click the confirmation link they get to see the protected page instead of log in.
Here’s my code:

import React from 'react'
import Button from 'react-bootstrap/Button';
import Protected from '../Protected';
import netlifyIdentity from 'netlify-identity-widget'

import AppHeader from '../../components/AppHeader'


import {
    BrowserRouter as Router,
    Route,
    // Link,
    Redirect,
    withRouter
  } from 'react-router-dom'
  

  
const netlifyAuth = {
    isAuthenticated: false,
    user: null,
    authenticate(callback) {
      this.isAuthenticated = true;
      netlifyIdentity.open();
      netlifyIdentity.on('login', user => {
        this.user = user;
        callback(user);
      });
    },
    signout(callback) {
      this.isAuthenticated = false;
      netlifyIdentity.logout();
      netlifyIdentity.on('logout', () => {
        this.user = null;
        callback();
      });
    }
  };

  function PrivateRoute({ component: Component, ...rest }) {
    return (
      <Route
        {...rest}
        render={props =>
            netlifyIdentity.currentUser() ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{
                pathname: '/login',
                state: { from: props.location }
              }}
            />
          )
        }
      />
    );
  }

const AuthButton = withRouter(
    ({ history }) =>
        netlifyIdentity.currentUser() ? (
        <p className='d-flex justify-content-between'>
          <span className='capitalize'>Welcome {netlifyIdentity.currentUser().user_metadata.full_name}!</span>
          <Button className='ml-3'
            onClick={() => {
              netlifyAuth.signout(() => history.push('/'));
            }}
          >
            Sign out
          </Button>
        </p>
      ) : ( 
          
        <div className='mt-5'>
          <p>You are not logged in.</p>
          <Redirect to={'/protected'} />
        </div>
      )
  );


  class Login extends React.Component {
    state = { redirectToReferrer: false };

    login = () => {
      netlifyAuth.authenticate(() => {
        this.setState({ redirectToReferrer: true });
      });
    };
  
    render() {
      let { from } = this.props.location.state || { from: { pathname: '/protected' } };
      let { redirectToReferrer } = this.state;
      if (redirectToReferrer) return <Redirect to={from} />;
      return (
        <div>
          <p className='mb-4'>Log in to {this.props.appName}</p>
          <hr></hr>
          <Button className='mt-2' onClick={this.login}>Log in</Button>
        </div>
      );
    }
  }

export default function Auth(props) {
    let appName = props.appName
    return (
      <Router>
        <div>
          <AppHeader authButton={<AuthButton />}/>
          <Route path="/login" render={(props) => <Login {...props} appName={appName} />}/>
          <PrivateRoute path="/protected" component={Protected} />
          <Redirect to={'/login'} />
        </div>
      </Router>
    );
  }`
2

Hi @abtx,

When a user clicks the confirmation link in the e-mail, by default it will lead them to your sites home page where I assume you have the netlify-identity-widget initialized and running so it can handle the confirmation token. There isn’t a specific confirmation event for you to hook in to, but you can use useEffect react hook or a life cycle method like componentDidMount to check the currentUser and ensure they are in a logged in state, and if so, programmatically do a route change to your protected content. The full details on how you accomplish this is up to you and specific to your code.

Note that the simplest way to make sure the user is logged in is to attempt to refresh the JWT token, it’ll only return a valid JWT so if there isn’t one it will error. You can refresh the token by running: netlifyIdentity.gotrue.currentUser().jwt() which is an async function which returns a promise, the resolution of that promise is the current, valid JWT. Or it’ll fail and you can catch the error and you’ll know the user isn’t logged in.

3

Hi @futuregerald

Is there anyway we can disable the modal that automatically logs the user in once the user is redirected from the confirmation email? I’d like to confirm the email without logging the user in. Any help would be greatly appreciated.

4

Netlify Identity no longer receives any technical support and it’s in the process of deprecation.