Frontend Accelerator
Frontend Accelerator
  • Getting Started
    • Welcome
    • Start right now 👉
  • Setup
    • Database
    • Payments
    • Authentication
    • AI
  • Features
    • Dashboard
    • Localization
    • Changelog
    • Rich text editor
    • Lead magnet
    • Checkout button
    • Sign in button
    • Sales countdown banner
    • Capture email button
    • Locale switcher
    • Social icons
  • Extra
    • Theming
    • Support
Powered by GitBook
On this page
  • Social Logins
  • Google 🟨
  • Facebook 🟦
  • Magic links - passwordless sign-in
  1. Setup

Authentication

PreviousPaymentsNextAI

Last updated 3 months ago

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.

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

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. Set in .env variables: GOOGLE_ID= GOOGLE_SECRET=

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

Facebook 🟦

  1. Set .env variables: FACEBOOK_APP_ID= FACEBOOK_SECRET=

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:

  • 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.

If you are not, you need to create it through Google console:

Create app through developer portal:

to be configured

https://support.google.com/cloud/answer/6158849?hl=en
https://developers.facebook.com
Database
Social login (Google, Facebook, 60+ others)
Magic links (passwordless) sign in