Add Authentication to Starter-kit
Only for those who are using the starter-kit.
Overview
In this guide, we'll walk you through the process of adding authentication partly or completely to your starter-kit. We'll be using NextAuth.js for authentication.
With NextAuth
Prerequisites
-
add the following dependency to your project:
- pnpm
- yarn
- npm
pnpm install next-auth
yarn add next-auth
npm install next-auth
-
add the following environment variables from the full-version's
.env
file to your project's.env
file:BASEPATH
NEXTAUTH_BASEPATH
NEXTAUTH_URL
NEXTAUTH_SECRET
API_URL
NEXT_PUBLIC_API_URL
-
copy the following files from the full-version to your project:
src/app/api/auth/[...nextauth]/route.ts
src/contexts/nextAuthProvider.tsx
-
Add the
NextAuthProvider
import statement and its usage from the full-version'ssrc/components/Providers.tsx
file to your project'ssrc/components/Providers.tsx
file
Folder Structure Changes
-
Create a new folder named (private) inside the (dashboard) folder and move all the content of the (dashboard) folder to the (private) folder.
-
Create another folder named (guest-only) inside the (blank-layout-pages) folder and move the login and register folders (if available) to the (guest-only) folder. You can find more details about public routes, private routes, and guest-only routes in this guide.
Additional File Copying
Copy the following files from the full-version to your project:
src/hocs/AuthGuard.tsx
src/components/AuthRedirect.tsx
src/hocs/GuestOnlyRoute.tsx
(blank-layout-pages)/(guest-only)/layout.tsx
Add the AuthGuard
import statement and its usage from the full-version's (dashboard)/(private)/layout.tsx
file to your project's (dashboard)/(private)/layout.tsx
file
Adjustments for Projects Without i18n
If you haven't added i18n
to your project, make the following changes:
- AuthGuard.tsx: Remove
Locale
and its related code. - AuthRedirect.tsx:
-
Remove
lang
from theAuthRedirect
function and its related code. -
Replace the
getLocalizedUrl
function with the actual URL throughout the project, as shown below:- getLocalizedUrl('/your-url', lang)
+ '/your-url'
-
- GuestOnlyRoute.tsx: Remove
lang
and its related code, and replace thegetLocalizedUrl
as above. - (guest-only)/layout.tsx: Remove
lang
and its related code.
Add Credentials Provider
If you want to use email and password for authentication, you need to add NextAuth's CredentialsProvider. To do so, follow these steps:
-
copy the
src/app/api/login
folder from the full-version to your project -
copy the
src/libs/auth.ts
file from the full-version to your project. In this file, the code for the GoogleProvider has also been implemented. If you don't need GoogleProvider, you can remove its code by following the step related to thesrc/libs/auth.ts
file from this guide -
copy the
src/views/Login.tsx
file from the full-version to your project. In this file, the code for logging in with Google has also been implemented. If you don't need this feature, you can remove its code by following the step related to removing the button for logging in with Google from this guideNote!The code for i18n has been implemented in the
src/views/Login.tsx
file. If you don't have i18n in your project, you can remove its code from this file
That's it! You have successfully added NextAuth with CredentialsProvider to your starter-kit.
Add Google Provider with Prisma Adapter
If you want to use Google for authentication, you need to add a Google provider. To do so, follow these steps:
-
add the following dependencies to your project:
@auth/prisma-adapter
@prisma/client
prisma
dotenv-cli
Use the following command to add these dependencies:
- pnpm
- yarn
- npm
pnpm install @auth/prisma-adapter @prisma/client prisma dotenv-cli
yarn add @auth/prisma-adapter @prisma/client prisma dotenv-cli
npm install @auth/prisma-adapter @prisma/client prisma dotenv-cli
-
update the following in your
package.json
file:"scripts": {
...
+ "migrate": "dotenv -e .env -- npx prisma migrate dev",
- "postinstall": "npm run build:icons"
+ "postinstall": "prisma generate && npm run build:icons"
},
"dependencies": {
...
},
+ "prisma": {
+ "schema": "./src/prisma/schema.prisma"
+ } -
add the following environment variables from the full-version's
.env
file to your project's.env
file:GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET
DATABASE_URL
-
copy the
src/libs/auth.ts
file from the full-version to your project. In this file, the code for the CredentialsProvider has also been implemented. If you don't need CredentialsProvider, you can remove its code by following the step related to thesrc/libs/auth.ts
file from this guide -
copy the
src/views/Login.tsx
file from the full-version to your project. In this file, the code for logging in with email and password has also been implemented. If you don't need this feature, you can remove its code by following the steps related to thesrc/views/Login.tsx
file from this guideNote!The code for i18n has been implemented in the
src/views/Login.tsx
file. If you don't have i18n in your project, you can remove its code from this file. Also we have added validation code in thesrc/views/Login.tsx
file. If you don't need validation, you can remove it from this file or else you need to install the packages required for validation -
copy the
src/prisma/schema.prisma
file from the full-version to your project -
run the following command to create a new migration:
- pnpm
- yarn
- npm
pnpm migrate
yarn migrate
npm run migrate
-
run the following command to generate Prisma client:
npx prisma generate
That's it! You have successfully added NextAuth with GoogleProvider and PrismaAdapter to your starter-kit.
Signing Out
We have implemented the sign-out functionality in the full-version/src/components/layout/shared/UserDropdown.tsx
file. You may copy the signOut
import statement and its usage from this file to your project's src/components/layout/shared/UserDropdown.tsx
file.
Adding User's Name and Email to User Dropdown
We have shown the user's name and email in the user dropdown in the navbar from the full-version/src/components/layout/shared/UserDropdown.tsx
file. If you want to show this, you may copy the useSession
import statement and its usage from this file to your project's src/components/layout/shared/UserDropdown.tsx
file.
Without NextAuth
If you don't want to use NextAuth, you may refer to the following links: