search

shield-checkAuthentication

circle-info

Supported methods:

For both of these methods, users don't need to manually create an account; it is automatically done for them when they use social login or magic link for the first time.

circle-exclamation

NextAuth intentionally does not allow account auto-linking by default. That means when you sign up first for example with Google and then later on with Facebook (and both accounts use the same email), you get error: "To confirm your identity, sign in with the same account you used originally".

To allow for auto-linking you need to specifically set allowDangerousEmailAccountLinking for each specific provider

hashtag
Social Logins

Social logins allow users to sign in using their existing accounts from platforms like Google, Facebook, GitHub, and many more.

To enable social login, make sure specific provider is added to next-auth.ts file, configured with client ID and secret, and callback function profile mapped to the user model in your database:

  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
      // allowDangerousEmailAccountLinking // optional for each provider
      async profile(profile): Promise<User> {
        // mapped to exact same model as in DB and elsewhere in the app
      },
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_APP_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
      async profile(profile): Promise<User> {
        // mapped to exact same model as in DB and elsewhere in the app
      }
    }),
  ]

.env file

hashtag
Google 🟨

  1. If you are using Firestore you can add Google authentication through there.

  2. If you are not, you need to create it through Google console: https://support.google.com/cloud/answer/6158849?hl=enarrow-up-right

  3. Set in .env variables: GOOGLE_ID= GOOGLE_SECRET=

  4. Remember to whitelist/allow localhost! Otherwise you won't be able to test it locally.

hashtag
Facebook 🟦

  1. Create app through developer portal: https://developers.facebook.comarrow-up-right

  2. Set .env variables: FACEBOOK_APP_ID= FACEBOOK_SECRET=

hashtag
Magic links - passwordless sign-in

Magic link authentication allows users to sign in using a one-time secure link sent to their email, without requiring a password.

Magic links require:

  • Database to be configured

  • Email provider .env variables are correctly setup and registered within NextAuth

Setup:

  1. Get the following from your email provider and set these .env variables: EMAIL_SERVER_USER= EMAIL_SERVER_PASSWORD= EMAIL_SERVER_HOST= EMAIL_SERVER_PORT= EMAIL_FROM= (email account you want to get replies on) Note: Magic links require database to be setup.

PreviousPaymentsNextAI

Last updated