Authentication

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.

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

#- Google OAuth
GOOGLE_ID=
GOOGLE_SECRET=
#- Facebook OAuth
FACEBOOK_APP_ID=
FACEBOOK_SECRET=

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=en

  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.

Facebook 🟦

  1. Create app through developer portal: https://developers.facebook.com

  2. Set .env variables: FACEBOOK_APP_ID= FACEBOOK_SECRET=

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.

Last updated