Disable auto login on user sign up. (auth0-react)

[gmwill934]

• Which SDK this is regarding: auth0-react
• SDK Version: 1.3.0
• Platform Version: e.g. Node 14.15.4
• Code Snippets/Error Messages/Supporting Details/Screenshots:

Hey there, I’m trying to disable a user from being logged in automatically after they sign up, there is no detailed documentation on how to do this when using auth0-react.

I’ve tried to use the following options

• auto_login

• loginAfterSignup

  export const LoginButton = ({ loginWithRedirect }: LoginButtonProps) => (
  // <button onClick={() => loginWithRedirect({auto_login: false})}>Iniciar Sesion
  // <button onClick={() => loginWithRedirect({loginAfterSignup: false})}>Iniciar Sesion
  <button onClick={() => loginWithRedirect()}>Log In
  );

Is there a proper way on doing this with the auth0-react library?

[stephanie.chamblee]

Hi @gmwill934,

Are you using the New or Classic Login Experience for Universal Login?

auto_login is the parameter used for auth0.js and loginAfterSignup is used for lock.js. These are libraries used for customizing the Classic Universal Login Experience.

Unfortunately, there isn’t an option for the react-auth0 SDK for this functionality. (you can find all of the options available to loginWithRedirect here: RedirectLoginOptions | @auth0/auth0-react)

If you are using the Classic Experience, you can use the loginAfterSignup or auth_login option by going to Branding > Universal Login and going to the Login tab and selecting either Lock.js or the Custom Login Form options from the template dropdown.

If you are using the New Universal Login Experience, you can use a rule to throw an unauthorized error so that the user will be redirected to your page with the error and error description in the URL. Your app can show a user-friendly message using the information returned in the URL query params.

For example, here is how you would throw an error for a user who has not verified their email address:

function emailVerified(user, context, callback) {
  if (!user.email_verified) {
    return callback(new UnauthorizedError('Please verify your email before logging in.'));
  } else {
    return callback(null, user, context);
  }
}

[kurtalina]

I think my problem may be related to this. I’m using universal login in a React Native app that’s relying on Expo (managed). I have users successfully authenticating, but can’t figure out how to switch users (ie. a teacher lends an iPad to another student and first needs to remove the previous student’s state). However, sending the user back through the login flow causes Auth0 to find previous tokens (in the browser cookie perhaps) and reuse or refresh them automatically, essentially allowing anyone handed this device to login as the previous user without specifying credentials. What is the flow to clear the currently stored tokens or other state, such that upon login, a user is required to enter username/password for a fresh authentication? I am using the library expo-auth-session and passing it a constructed URL of the format https://{auth0Domain}/authorize{queryParams} where queryParams specify client_id, redirect_uri and response_type: “token id_token”. Thanks!

[gmwill934]

Thanks for the prompt answer Stephanie!

And yes, I am using the Universal Login with the new experience.

So, you are telling me that it’s not possible to send the user to the sign up "page/widget" instead of the login "page/widget".

I kinda want to improve the UX of my whole auth flow.

What other options do I have?

Are there any other options?

[stephanie.chamblee]

Hi @gmwill934,

@gmwill934

So, you are telling me that it’s not possible to send the user to the sign up "page/widget" instead of the login "page/widget" .

I may have misunderstood your question. Would you like to prevent users from being logged in after sign up or would you like to present the signup page instead of the login page? You can make users land directly on the Signup page instead of the Login page by specifying the screen_hint=signup parameter when redirecting to /authorize:

loginWithRedirect({screen_hint: 'signup'})

[gmwill934]

I apologize, I had a lot of tabs open and got confused.

Back to the original question…

I do have a rule in place…

function emailVerified(user, context, callback) {
  if (!user.email_verified) {
    return callback(
      new UnauthorizedError('Please verify your email before logging in.')
    );
  } else {
    return callback(null, user, context);
  }
}

If a user that is not verified logs in, no message (please verify your email address) is showed to the user, the page just gets redirected and blinks, which is a bit confusing. Is there something else that can be done to notify the user that he/she needs to verify the email?

[stephanie.chamblee]

Oh, that makes sense! Not a problem.

With the rule enabled, the user will be redirected to your callback URL along with the error in the query param. For example, the redirect will look something like this:

http://localhost:4200/?error=unauthorized&error_description=Please%20verify%20your%20email%20before%20logging%20in.&state=ZXdudkV%2BaWoyVzIwR09LZ3FDS2dGOEwzZk9ZcUJiNHVhamdNZFJEU1VDQQ%3D%3D

Your application will have to handle the error by using the error_description and error params in the URL and displaying an error message.

[gmwill934]

Awesome thanks for the help!