Amplify-js: Auto signin after successful signup

[ianpogi5]

After a successful signup with MFA, how do I automatically sign in the user? It would be annoying for the user and costly for developer to send another SMS for sign in.

I don't see in the docs how to do this. Is this possible with current amplify?

[mlabieniec]

@ianpogi5 this will depend on if you have MFA setup for both signin/signup. Since if you have MFA on signin you obviously won't be able to accomplish this. If you don't have MFA on signin, then you can do it by storing the signin info in memory and just running Auth.signIn after the completion of comfirmSignUp. What i gather though is it may be helpful to have a convenience method for this that also handles the conditions e.g. Auth.SignUpSignIn() or similar.

[ianpogi5]

Yes I do have MFA for both. Can I request this feature?

On Thu, Jun 7, 2018, 12:59 AM Michael Labieniec, [e-mail]
wrote:

@ianpogi5 https://github.com/ianpogi5 this will depend on if you have
MFA setup for both signin/signup. Since if you have MFA on signin you
obviously won't be able to accomplish this. If you don't have MFA on
signin, then you can do it by storing the signin info in memory and just
running Auth.signIn after the completion of comfirmSignUp.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aws/aws-amplify/issues/991#issuecomment-395140981,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABA7w0W7-Wr6XseOZ24HRXb1omPhguVvks5t6AqAgaJpZM4UcGwm
.

[ianpogi5]

I managed to figure out a workaround as per your suggestion. I made MFA optional on signin. On first signin, I enabled MFA. But still I think this should be a built in feature.

Note that my use case is make it password-less login for user and use MFA to authenticate.

[kennu]

In #2170 I expressed the need to auto-login users after signing up. I don't use MFA but I don't want the user to have to re-enter the email and password that they just entered to sign up.

[kalzoo]

FWIW, my approach (SMS MFA-only, passwordless auth) is a custom lambda handler for PreSignup which returns

{ 
     ...,
      {
        response: {
          autoConfirmUser: true, // Auto-confirming them prevents having two confirmation codes on first signin, and allows an account to be active right away. User still needs MFA to log in
          autoVerifyPhone: false, // but this can be the discriminator between valid/invalid user
          autoVerifyEmail: false // I don't use email, here for illustration
        }
      }
}

So, effectively, after confirmSignUp I immediately call signIn, which still begins the SMS MFA flow. To the user, it appears that signUp and signIn are a single common form with a common flow. This has the flaw of allowing new unverified users (and users who type their numbers incorrectly), but the fact that phone_number is still unverified until after the first successful signIn with MFA means that my service can distinguish those, and if it becomes a problem I can time out/delete unverified users after 3 minutes or so.

Alternative to changing user pool MFA settings, which of course can be painful/impossible to change later. To revert this flow to the original (double-confirmation), all I have to do here is modify that lambda.

[mHou407]

Hi @ianpogi5, you mentioned in your comment that you are using "password-less login for user and use MFA to authenticate". I'm just wondering did you achieve this by using CUSTOM_AUTH flow or MFS with pre-set password? I'm trying to achieve the same on-boarding/log-in flow, but noticed that Congito won't initiate SMS MFA unless a correct password is supplied in CUSTOM_AUTH flow.

[ianpogi5]

hi @mHou407 No. Here's how I did my password-less login.
I created two rest api:

1. To store auto generated username and password with phone number as key in ddb.
2. To retrieve the username and password using phone number.

I only have one form which accepts phone number. When user submits form, I check api if phone number exists, if yes I do login process. If not, I do signup process.

Signup process:

1. Generate random username and password
2. Do amplify signup.
3. MFA sends sms
4. Show Auth Code form.
5. Amplify confirmSignUp
6. Store credentials via rest api along with phone number as key.
7. Amplify SignIn
8. User logged in

Login process:

1. Amplify SignIn
2. MFA sends sms
3. Show Auth Code form.
4. Amplify confirmSignIn
5. User logged in

Not sure if this is still necessary today but at that time that's the only way I could think of to make password-less login work.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[camilobern]

Keeping this issue alive.

This is a feature we'd like to be introduced, it's especially important for user retention on registration.

[ronkot]

I also thought that user would be automatically signed in after sign up, but managed to get along by doing sign in request immediately after sign up:

await Auth.signUp({username, password})
await Auth.signIn(username, password)

[alexandermontgomery]

@ronkot - did this work even if they have not confirmed?

[ronkot]

@alexandermontgomery no, cognito user has to be confirmed to be able to sign in. In fact we have a verify email flow between Auth.signUp() and Auth.signIn() calls, but we preserve the password in application state so that after email verification we can sign in the user automatically.

Also, if you happen to be using cognito auto confirm trigger, you could use the code above as-is.

[alexandermontgomery]

Thank you @ronkot - that was my plan (preserving the password state in the application). Thanks for the tip on auto-confirm.

[NL33]

I would like to provide auto-sign-in using the amplify-authenticator component. Right now the default behavior is to have the user sign up, and then show the sign in screen and require the user to take that added step. This is out of line with modern authentication practice that user's expect.

Is it possible to have automatic sign-in after the user signs up while still using the authenticator component?

If the authenticator sends out events after different actions, then maybe there could be a workaround. For example, if the amplify-authenticator sends out an event when the user's email is verified, then on receiving that event I could call Auth.signIn(), and sign the user in automatically.

But I have not found info on the authenticator sending out events. (I know you can subscribe to certain changes in user status, but I don't think there is a change when a user provides email and password, hits submit, and then gets verified).

If there is not a way to do automatic sign in with the authenticator, please add this feature. It is essential to making the authenticator useable.

[NL33]

For details on how to auto sign in with Amplify components, see this stack overflow discussion.

But it would be helpful if you could just select "automatic sign in" after sign up in the Cognito settings.

[cedvdb]

@mlabieniec saving the info in memory isn't a good solution. If the user does a refresh (F5) of the application the password is lost. As for persisting it it's not ideal either

[Ownmarc]

Not sure if thats on Amplify's end or AWS Cognito's end, but this has to be implemented. I hate it as a user when I have to re-enter username and password after confirming my account. I also do not think storing the password in the state of the app is a good idea and, as @cedvbd said, you lose it if there is a refresh or if the user doesn't confirm account right away.

[xitanggg]

Is there an update on this issue? It is worst user experience practice to ask user to sign in again upon signing up.

repost: https://github.com/aws-amplify/amplify-js/issues/2562#issuecomment-601900013
The amplify team should definitely work on this to get it fix to improve user experience and avoid wasting developer's time to build work around. In the meanwhile, here is my work around for anyone sharing this bad user experience. The idea is to store username & password in a tempInfo variable during signUp and call autoSignIn when user signedUp. Note this won't work if user don't finish code authentication in one stop as the temporary variable would be lost when page refreshes/reloads.

function App() {
    //define tempInfo and function to change its values
    var tempInfo = {
        u: '',
        p: ''
    };
    const setTempInfo = (input) => {
        tempInfo.u = input.u;
        tempInfo.p = input.p;
    };
       return(<Authenticator
            authState=''
            hide={[SignIn, SignUp]}
            amplifyConfig={awsconfig}>
            //pass them to custom components
            <CustomSignIn
                tempInfo={tempInfo}
                setTempInfo={setTempInfo}
            /> 
            <CustomSignUp
                tempInfo={tempInfo}
                setTempInfo={setTempInfo}
            />
        </Authenticator>);

class CustomSignUp extends SignUp {
    constructor(props) {
        super(props);
        this._validAuthStates = ['signUp'];
    }

    //Copy what ever signUp has in the documentation 
    //(https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Auth/SignUp.tsx)
    signUp() {
        //rest is skipped
        Auth.signUp(signup_info)
        .then((data) => {
            this.props.setTempInfo({ u: username, p: password }); //Add this to store info before changing state
            this.changeState('confirmSignUp', data.user.username);
        })
        //rest is skipped
}

class CustomSignIn extends SignIn {
    constructor(props) {
        super(props);
        this._validAuthStates = ['signIn', 'signedOut', 'signedUp'];
        this.autoSignIn = this.autoSignIn.bind(this);
    }

    //--- Auto Sign in after Sign up
    async autoSignIn() {
        // only perform auto signed in if users didn't refresh page
        if (this.props.tempInfo.u !== '' && this.props.tempInfo.p !== '') {
            try {
                const user = await Auth.signIn(
                    this.props.tempInfo.u,
                    this.props.tempInfo.p
                );
                this.props.setTempInfo({ u: '', p: '' }); //Clear temp info after successful sign in
                this.checkContact(user);
            } catch (err) {
                console.log(err);
            }
        }
    }

    showComponent(theme) {
        //Check current authState and trigger autoSignIn if it is signedUp
        if (this.props.authState === 'signedUp') {
            this.autoSignIn();
        }
        //skip the rest
    }
}

[jefelewis]

Has there been any resolution to this?

Process:

1. yield call([Auth, 'signUp'], email, password);
2. User gets a Verification Code sent to their email
3. With the Verification Code, the user completes the Sign Up process with yield call([Auth, 'confirmSignUp'], email, verificationCode);

Options:

1. Use yield call([Auth, 'signIn'], email, password); with the existing email and password after the user completes the sign up process.
2. Is there a confirmSignUpAndSignIn method? When using withAuthenticator(App), the user is automatically signed in after the user completes the sign up process. Is it using confirmSignUp and then signIn after or a combined method?

[mcottingham]

I would love an update on this. Has any progress been made?

[sammartinez]

Hello everyone! I wanted to provide an update on this, we introduced new UI Components, our version 2 of our components, earlier in the year. With this came the feature of auto signing in after a successful sign up. We do recommend to use the new UI Components as it does offer a way for you to do what is being called out within this issue. Resolving this issue as the feature is complete.

[jwilksy]

@sammartinez Can you please explain how you were able to accomplish this workflow through the new UI Components to save us some time from looking through the code?