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.

Email and password sign in form

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:

Magic link sign in form

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

Note: Magic link authentication bypasses 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.

Enable MFA button in security settings

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

MFA verification code input

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
Social provider sign in buttons

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

Next: Sign Up →