Authentication

Auth.js

Formerly known as next-auth, Auth.js is the most reliable and popular authentication solution for Next.js projects. In Achromatic, we use the latest v5 beta version to ensure maximum compatibility with the app router.

Providers

Users can sign in with the following providers:

• Credentials (username and password)
• Google account
• Microsoft account

Linked Accounts

Users can connect multiple login methods to a single account. For example, they can link their Google and Microsoft accounts to their main profile.

Sessions

User sessions are securely stored in the database. This allows active sessions to be managed in the security settings. Additionally, changes to user roles take effect immediately.

Auth Secret

Auth.js requires a secret to function. It's acceptable to keep the pre-configured secret for local development, but anything publicly accessible should have a different secret.

We recommend using openssl rand -base64 32 to generate a secret. Add the generated secret to the .env file:

AUTH_SECRET=pQld7GsmUiZfNEv8vBJSQPxEJ84YO8NG3lsjpRI40W0=

Credentials Provider

The credentials provider is fully implemented. This includes:

• Login
• Sign up
• Forgot password
• Verification via link
• Verification via OTP
• Password change
• Email change

Passwords are hashed and compared using bcrypt with a salt length of 13. To use the credentials provider, an SMTP provider for email sending must be configured.

Google Provider

Google allows users to authenticate using their Google accounts, offering a quick and familiar sign-in method.

To set up the Google Provider, follow these steps:

1. Visit the Google Cloud Console.
2. Create an account if you don't have one already.
3. Navigate to APIs or click here
4. Configure the OAuth consent screen and add yourself as test user.
5. Click on Credentials, create new OAuth credentials and save those credentials.
6. Add the Authorized JavaScript origin to the credential settings.

http://localhost:3000

7. Add the Authorized redirect URI to the credential settings.

http://localhost:3000/api/auth/callback/google

8. Update .env with the created credentials.

AUTH_GOOGLE_CLIENT_ID=
AUTH_GOOGLE_CLIENT_SECRET=

Microsoft Provider

Microsoft allows users to authenticate using their Microsoft work, school, or Xbox accounts.

To set up the Microsoft (Entra ID) Provider, follow these steps:

1. Visit the Azure Portal.
2. Create an account if you don't have one already.
3. Navigate to your Entra ID (Active Directory).
4. Register a new application with platform web.
5. Click on Authentication in the menu and add the redirect URIs

http://localhost:3000
http://localhost:3000/api/auth/callback/microsoft-entra-id

6. Under Certificates & Secrets, create a new client secret.
7. Update .env with the created secret.

AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID=
AUTH_MICROSOFT_ENTRA_ID_CLIENT_SECRET=

Learn More

For advanced settings or troubleshooting, see the Auth.js documentation.

By using Auth.js in Achromatic, you get a robust authentication system that's both secure and flexible. This allows you to focus on building your app's main features.