Skip to main content

Add Authentication to Starter-kit

warning

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 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's src/components/Providers.tsx file to your project's src/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:

    1. Remove lang from the AuthRedirect function and its related code.

    2. 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 the getLocalizedUrl 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 the src/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 guide

    Note!

    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 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 the src/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 the src/views/Login.tsx file from this guide

    Note!

    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 the src/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 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: