Auth0 Home Blog Docs

React hosted login first login screen

hosted-login
signup
spa
react

#1

Auth0 Setup: Hosted Login

Environment: React SPA

Is it possible to hit a different callback page (to the standard login) when a user signs up through the hosted login screen?

Ideally I’d like the user to see an ‘initial setup’ screen that only appears once on their first login.

I’ve looked at the following which can help identify whether its their first login but just seeing if the community have particular best practice implementations for this.

https://stackoverflow.com/questions/40250292/user-signup-event-in-auth0-lock


#2

For anyone interested I created a rule like this:

function (user, context, callback) {
  user.app_metadata = user.app_metadata || {};

  console.log(user.app_metadata.first_login);

  if (user.app_metadata.first_login) {
    
    console.log('User has signed in before');
    
    user.app_metadata.first_login = false;
    
    auth0.users.updateAppMetadata(user.user_id, user.app_metadata)
    .then(function(){
      callback(null, user, context);
    })
    .catch(function(err){
      callback(err);
    });
  }
  else if(user.app_metadata.first_login === undefined) {
    
    console.log('User first login');
    
    user.app_metadata.first_login = true;
    
    auth0.users.updateAppMetadata(user.user_id, user.app_metadata)
    .then(function(){
      callback(null, user, context);
    })
    .catch(function(err){
      callback(err);
    });
  }
  else {
    
    console.log('User standard login');
    
    return callback(null, user, context);
  }
}

I can then use that meta data upon in the Authentication service to send the user to the first login page as necessary.


#3