Sign In

Implement sign in with email/password and magic link authentication.

Users can sign in using email/password, magic link (passwordless) or social providers (Google, GitHub, etc.).

Sign In Page

  • Location: apps/web/app/[locale]/auth/sign-in/page.tsx
  • Route: /auth/sign-in

Email/Password Sign In

The default sign in page uses the SignInMethodsContainer defined at packages/auth/src/components/sign-in-methods-container.tsx.

To enable/disable the email/password sign in, you can set the NEXT_PUBLIC_AUTH_PASSWORD environment variable to true or false:

NEXT_PUBLIC_AUTH_PASSWORD=false

Note: Magic link authentication is implemented but disabled by default. To enable, set NEXT_PUBLIC_AUTH_MAGIC_LINK=true in your environment variables.

The magic link sign in page uses the MagicLinkAuthContainer at packages/auth/src/components/magic-link-auth-container.tsx:

To enable/disable the magic link sign in, you can set the NEXT_PUBLIC_AUTH_MAGIC_LINK environment variable to true or false:

NEXT_PUBLIC_AUTH_MAGIC_LINK=false

NB: magic link authentication by-passes two factor authentication (MFA). MFA is only enforced for users signing in with email/password.

With MFA Challenge

When users are signing in with email/password, they can enable two factor authentication (MFA) by clicking on the "Enable MFA" button in the /settings/security page.

After signing in with email/password, they will be prompted to enter a code generated using their authenticator app (Google Authenticator, Authy, etc.):

Social Sign In

You can optionally enable social providers for sign in. By default, we enable the Google OAuth provider. You can customize these as you see fit.

NEXT_PUBLIC_AUTH_OAUTH_PROVIDERS=google,github

Please refer to the Social Providers documentation for more information on how to configure social providers.


Next: Sign Up →