aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.42k stars 2.12k forks source link

Auto signin after signup not working #13666

Open Ladvace opened 1 month ago

Ladvace commented 1 month ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

Amplify Gen 2 (Preview)

Environment information

``` System: OS: macOS 14.5 CPU: (10) arm64 Apple M1 Pro Memory: 175.64 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.13.0 - ~/.nvm/versions/node/v20.13.0/bin/node Yarn: 1.22.19 - ~/Library/pnpm/yarn npm: 10.5.2 - ~/.nvm/versions/node/v20.13.0/bin/npm pnpm: 9.4.0 - ~/Library/pnpm/pnpm bun: 1.1.7 - ~/.bun/bin/bun Watchman: 2024.07.15.00 - /opt/homebrew/bin/watchman Browsers: Chrome: 127.0.6533.74 Safari: 17.5 npmPackages: @aws-amplify/ui-react: ^6.1.14 => 6.1.14 @headlessui/react: ^2.1.2 => 2.1.2 @reduxjs/toolkit: ^2.2.6 => 2.2.6 @tanstack/eslint-plugin-query: ^5.50.0 => 5.50.0 @tanstack/react-form: ^0.25.2 => 0.25.2 @tanstack/react-query: ^5.49.2 => 5.49.2 @tanstack/react-router: ^1.43.6 => 1.43.6 @tanstack/router-cli: ^1.43.12 => 1.43.12 @tanstack/router-devtools: ^1.43.6 => 1.43.6 @tanstack/router-plugin: ^1.43.5 => 1.43.9 @tanstack/zod-form-adapter: ^0.25.2 => 0.25.2 @types/react: ^18.3.3 => 18.3.3 @types/react-dom: ^18.3.0 => 18.3.0 @typescript-eslint/eslint-plugin: ^7.15.0 => 7.15.0 @typescript-eslint/parser: ^7.15.0 => 7.15.0 @vitejs/plugin-react: ^4.3.1 => 4.3.1 autoprefixer: ^10.4.19 => 10.4.19 aws-amplify: ^6.4.3 => 6.4.3 date-fns: ^3.6.0 => 3.6.0 eslint: ^8.57.0 => 8.57.0 eslint-plugin-react-hooks: ^4.6.2 => 4.6.2 eslint-plugin-react-refresh: ^0.4.7 => 0.4.7 flowbite: ^2.4.1 => 2.4.1 flowbite-react: ^0.10.1 => 0.10.1 globals: ^15.8.0 => 15.8.0 immer: ^10.1.1 => 10.1.1 postcss: ^8.4.39 => 8.4.39 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 react-pdf: ^9.1.0 => 9.1.0 react-redux: ^9.1.2 => 9.1.2 react-select: ^5.8.0 => 5.8.0 tailwindcss: ^3.4.4 => 3.4.4 typescript: ^5.2.2 => 5.5.2 vite: ^5.3.3 => 5.3.3 zod: ^3.23.8 => 3.23.8 npmGlobalPackages: @aws-amplify/cli: 12.12.4 corepack: 0.28.0 npm: 10.5.2 pnpm: 9.1.0 ```

Describe the bug

as in this issue https://github.com/aws-amplify/amplify-js/issues/991, the autoSignIn parameters in the signUp function doesn't work, the user doesn't get logged in, this is quite annoying and it makes the library almost unusable for me.

An issue for this already exist but got closed.

Expected behavior

to sign in after the signup is successful

Reproduction steps

just sign in

Code Snippet

   const signUpOutput = await signUp({
      username: email,
      password,
      options: {
        userAttributes: {
          email,
        },
        autoSignIn: true,
      },
    });

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

dylan-tabist commented 1 month ago

https://docs.amplify.aws/react/build-a-backend/auth/connect-your-frontend/sign-up/

You'll have to call await autoSignIn() if the signUpOutput.nextStep is COMPLETE_AUTO_SIGN_IN.

Please refer to the documentation that I just shared

Ladvace commented 1 month ago

I've already tried it actually and I get the following error:

AutoSignInException: The autoSignIn flow has not started, or has been cancelled/completed. at initialAutoSignIn

I this this is due to the fact that when I want to sign in the user after the signup, the user is not confirmed yet, I would like to sign in the user after the sign up but before the verification step

dylan-tabist commented 1 month ago

@Ladvace yes your understanding is correct.

I guess in your case, you might want to consider to use AdminConfirmSignUp

Ladvace commented 1 month ago

yeah I came across this, is there a way to achieve this via amplify? or is this something that I have to do on the backend?

dylan-tabist commented 1 month ago

@Ladvace

You might want to look into Pre Sign Up lambda trigger.

https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-lambda-pre-sign-up.html#aws-lambda-triggers-pre-registration-example-2

Ladvace commented 1 month ago

thanks, I'll check it out

cwomack commented 1 month ago

Hello, @Ladvace and thanks for opening this issue. As @dylan-tabist stated above, the default behavior for a basic auth flow in Amplify will require a user to sign up, get confirmed, then be signed in. If you're looking to bypass this middle step for a quicker sign up/sign in process for users, then the customizing the pre-sign up lambda can allow for this.

Thanks @dylan-tabist for proving some community help here!

cwomack commented 1 month ago

Actually, wanted to follow up on this with a little more relevant information. While the Pre Sign Up Lambda trigger will work (as referenced in comments above), you can also circumvent paying for that compute cost with this auto-verify policy:

https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_cognito.UserPool.html#autoverify

You can use in the following way for a Gen 2 app (it will leverage the L1 Construct):

const { cfnUserPool } = backend.auth.resources.cfnResources

cfnUserPool.autoVerifiedAttributes = ["EMAIL"]

Depending on the use case here, you may want to conditionally autoverify (for example if they come from a "verified" domain) which is where that trigger comes in handy. While all this can be done, also want to be clear that this runs the risk of allowing absolutely anyone into your app as verified/confirmed.

Ladvace commented 1 month ago

thanks for the answer, I'm gonna try it out

cwomack commented 1 month ago

@Ladvace, just wanted to ping you and follow up to see if you had a chance to try this out. Let us know if you're still blocked here or have further questions.

Ladvace commented 1 month ago

Hi, in the end, I opted for an easier solution, I just merged the login and verification steps, after the verification step, I log in the user, It's not 100% optimal but it's the easiest in my case I think

yinka0136 commented 1 month ago

Hi @cwomack , I have a similar issue. on confirmation I get this response:

{ "isSignUpComplete": true, "nextStep": { "signUpStep": "COMPLETE_AUTO_SIGN_IN" } }

but when I call await autoSignIn(). I get this same error :

AutoSignInException: The autoSignIn flow has not started, or has been cancelled/completed.

oznekenzo commented 1 month ago

there is hardly any documentation on how to handle the email verification process when the user is sent a link and not a confirmation code. is the link process case also handled by autoSignIn ?

After clicking the verification link, do we run confirmSignUp without passing it a confirmationCode? [update: this does not work]

there is only one mention of how to implement in the docs and it hardly goes over any implementation details:

[Auto sign-in](https://docs.amplify.aws/react/build-a-backend/auth/connect-your-frontend/sign-in/#auto-sign-in)
The autoSignIn API will automatically sign-in a user when it was previously enabled by the signUp API and after any of the following cases has completed:

User confirmed their account with a verification code sent to their phone or email (default option).
User confirmed their account with a verification link sent to their phone or email. In order to enable this option you need to go to the [Amazon Cognito console](https://aws.amazon.com/pm/cognito), look for your userpool, then go to the Messaging tab and enable link mode inside the Verification message option. Finally you need to define the signUpVerificationMethod to link inside the Cognito option of your Auth config.

what is the flow to be implemented when using a confirmation link?

oznekenzo commented 1 month ago

I am also unsure how I invoke signUp so that I get the response COMPLETE_AUTO_SIGN_IN and not the CONFIRM_SIGN_UP response which I am getting now (I am passing autoSignIn: true under options to signUp)

yinka0136 commented 1 month ago

I am also unsure how I invoke signUp so that I get the response COMPLETE_AUTO_SIGN_IN and not the CONFIRM_SIGN_UP response which I am getting now (I am passing autoSignIn: true under options to signUp)

After signup with autoSignIn: true , you still have to confirm signup. before you get COMPLETE_AUTO_SIGN_IN

oznekenzo commented 1 month ago

After signup with autoSignIn: true , you still have to confirm signup. before you get COMPLETE_AUTO_SIGN_IN

the docs state that this can be returned after signUp

The signUp API response will include a nextStep property, which can be used to determine if further action is required. It may return the following next steps:

CONFIRM_SIGN_UP - The sign up needs to be confirmed by collecting a code from the user and calling confirmSignUp.
DONE - The sign up process has been fully completed.
COMPLETE_AUTO_SIGN_IN - The sign up process needs to complete by invoking the autoSignIn API.

so either the docs or you are wrong :/ appreciate the help

yinka0136 commented 1 month ago

After signup with autoSignIn: true , you still have to confirm signup. before you get COMPLETE_AUTO_SIGN_IN

the docs state that this can be returned after signUp

The signUp API response will include a nextStep property, which can be used to determine if further action is required. It may return the following next steps:

CONFIRM_SIGN_UP - The sign up needs to be confirmed by collecting a code from the user and calling confirmSignUp.
DONE - The sign up process has been fully completed.
COMPLETE_AUTO_SIGN_IN - The sign up process needs to complete by invoking the autoSignIn API.

so either the docs or you are wrong :/ appreciate the help

Read this.

The autoSignIn API will automatically sign-in a user when it was previously enabled by the signUp API and after any of the following cases has completed:

User confirmed their account with a verification code sent to their phone or email (default option). User confirmed their account with a verification link sent to their phone or email. In order to enable this option you need to go to the Amazon Cognito console, look for your userpool, then go to the Messaging tab and enable link mode inside the Verification message option. Finally you need to define the signUpVerificationMethod to link inside the Cognito option of your Auth config.

This means you must confirmUser. keyword previously enabled by the signUp API and after

oznekenzo commented 1 month ago

Read this.

I have read this several times and quoted it 5 comments above.

confirmUser is not a method provided by the library. if you mean confirmSignUp then this method requires a confirmation code. again, I am trying to find the appropriate implementation for the link sign up email verification method.

The quote from the docs mentions defining signUpVerificationMethod to link inside the Cognito option of my Auth config, although in their docs the only way they've set up their config is by passing the auto generated amplifyconfiguration.json file into Amplify.configure

import amplifyconfig from "./amplifyconfiguration";
Amplify.configure(amplifyconfig);

In AWS Cognito I've set up confirmation to be link and not code, however, when I amplify pull I do not see that reflected in the auto generated amplifyconfiguration.json

specific implementation details for a user signing up and confirming their email address with a link would be greatly appreciated

israx commented 1 month ago

Hello all. Sorry for any confusion when using the autoSignIn API. To create an account during sign-up, Cognito's default behavior requires users to either submit a confirmation code or click a verification link. Also The autoSignIn API is designed to work exclusively on active sessions within single page application contexts. Therefore, it cannot be utilized in the following scenarios:

  1. page was refreshed.
  2. API is called on a new tab.

@oznekenzo in order to enable autoSignIn with verification link you have to,

  1. Enable verification link on your Cognito User Pool— I see you already did it.
  2. call Amplify.configure as follows:
    
    const config:ResourcesConfig={
    Auth: {
        Cognito: {
          userPoolId: "xxxxxxxx",
          userPoolClientId: "xxxxxxxxx",
          signUpVerificationMethod:'link'
        },
      },
    };

Amplify.configure(config)


3. call `signUp` with `autoSignIn` enabled.
4. click the verification link sent to your email or phone
5. call the `autoSignIn` API
oznekenzo commented 1 month ago

@israx awesome - that worked - thank you very very much

sticking point was how to correctly configure the config passed to Amplify - I had seen some examples where both the auto created config (amplifyconfiguration.json) was merged w/ a custom Auth: { Cognito: { ... configuration which I had tried - as well as just passing amplifyconfiguration.json without any edits - until the snipped provided above.

israx commented 1 month ago

Thanks @oznekenzo for bringing that up. I created a task in our backlog to add specific documentation to address this use case.

yinka0136 commented 1 month ago

Hello all. Sorry for any confusion when using the autoSignIn API. To create an account during sign-up, Cognito's default behavior requires users to either submit a confirmation code or click a verification link. Also The autoSignIn API is designed to work exclusively on active sessions within single page application contexts. Therefore, it cannot be utilized in the following scenarios:

  1. page was refreshed.
  2. API is called on a new tab.

@oznekenzo in order to enable autoSignIn with verification link you have to,

  1. Enable verification link on your Cognito User Pool— I see you already did it.
  2. call Amplify.configure as follows:
const config:ResourcesConfig={
   Auth: {
       Cognito: {
         userPoolId: "xxxxxxxx",
         userPoolClientId: "xxxxxxxxx",
         signUpVerificationMethod:'link'
       },
     },
 };

Amplify.configure(config)
  1. call signUp with autoSignIn enabled.
  2. click the verification link sent to your email or phone
  3. call the autoSignIn API

Hi @israx Thank you for your feed back. I have a single page application and I am calling the autologin in the same tab I called confirm signup.

from confirmSignup I get { "isSignUpComplete": true, "nextStep": { "signUpStep": "COMPLETE_AUTO_SIGN_IN" } } which means my autosignin was set up correctly.

but when I call await autoSignIn(). I get this same error :

AutoSignInException: The autoSignIn flow has not started, or has been cancelled/completed.

israx commented 1 month ago

Hello @yinka0136. Could you please share code snippets about how you are calling the signUp, confirmSignUp and autoSignIn APIs?

yinka0136 commented 1 month ago

Hello @yinka0136. Could you please share code snippets about how you are calling the signUp, confirmSignUp and autoSignIn APIs?

@israx just to clarify before I send the snippet, do you mean that , Signup, confirmSignup and autologin have to be called on the same tab?

israx commented 1 month ago

Yes. The 3 APIs should share the same context. You can still call these APIs on the same tab but using different routes. e.g /signup , /confirm-sign-up and /auto-sign-in