Documentation
Features
Auth [PRO]

Authentication [PRO]

The Authentication is implemented using Auth.js (opens in a new tab) v5, previously (next-auth (opens in a new tab)). Both providers: email credentials and Google Sign In are configured.

The config files are apps/webpro/src/lib/auth.ts and apps/webpro/src/lib/auth-config.ts. The routing logic is based on the Next.js Middleware at apps/webpro/src/middleware.ts.

The app supports the following features:

  • Sign Up;
  • Sign In;
  • Sign In with Google;
  • Sign Out;
  • Two-Factor authentication (2FA);
  • Reset forgotten password;
  • Verify email on sign up or email change;
  • Protected pages;
  • Client and Server user session;
  • User roles (Admin and User) and Role Gate;
  • Custom error component;
  • Convenience hooks and utils (useCurrentRole, useCurrentUserRole, getCurrentUser, getCurrentUserRole).

Sign Up screenshot

Setup

  1. Generate a secret for next-auth. You can run a simple script in your Terminal or use an online generator.
openssl rand -base64 32

Add the generated secret to the .env file.

AUTH_SECRET=<generated_secret>
  1. Set up the Google Provider.

For the Google Sign In to work, you need to set up the OAuth Cliend ID on Google Cloud.

  1. Go to Google Cloud Console (opens in a new tab) and create a new project with your project name. After it has been created, make sure it is selected in the navbar.

b. Go to APIs & Services (opens in a new tab), select OAuth consent screen, select External User Type, give the app name and user support email and developer contact email. You can skip all other parts and configure them later. Save and continue a few times.

c. Now go to Credentials (opens in a new tab) and click CREATE CREDENTIALS and select OAuth Client ID. Inside there select Web application as Application type. The app name could be left as is. For local development add http://localhost:3000 (opens in a new tab) to Authorized JavaScript origins and add http://localhost:3000/api/auth/callback/google (opens in a new tab) to Authorized redirect URIs. Make sure that you don't have a trailing slash in the URIs For Production use your domain instead of localhost. Go ahead and click Create.

d. Copy the Client ID and Client and secret and paste them into the .env file.

GOOGLE_CLIENT_ID=<client_id>
GOOGLE_CLIENT_SECRET=<client_secret>
  1. Done! Users now can create accounts using email+password or Google providers.
Blog & CMSDatabase [PRO]