ShipKwiq uses NextAuth (opens in a new tab) to authenticate users.

There are 2 built-in ways to authenticate users with ShipKwiq: Credentials and Google & Github

Now let's setup Authentication in your application.

Credentials 🔐

1. Generate a auth secret key using the command given below and add it to your .env file

openssl rand -base64 33

this command only works in unix based systems, so you can use this (opens in a new tab) online tool to generate a random key.

2. All the auth config related files are already created inside the src folder like auth.ts or middleware.ts

There's is a routes.ts file also which has all the routes related to authentication like public routes , private routes and api routes also, you can modify it according to your needs.

3. Now, you need to connect to database to store user details, we have used postgreSQL and prisma for this project. So get your database url and update the connection string in the .env file.

DATABASE_URL=

4. We have created some forms with basic validation for you, you can find them inside the src/components/auth folder.

You can modify them according to your needs. Don't forget to update the database models and zod schemas.

Make sure to run the migrations after updating the models using :

cd src # because prisma is initialized inside the src folder
npx prisma generate
# then
npx prisma db push

5. Now, your credentials setup is done. Obviously, in credentials you need to verify user by sending verification emails, so for that you need to setup resend which we gonna setup next after social providers.

It may throw some errors due to resend (email) functionality, you can remove it if you don't need it or just comment it for now.

Google & Github 🌐

1. Go to the Google Developer Console (opens in a new tab) and create a new project and get the client id and client secret and update it in the .env file.

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

When registering an OAuth application on Google, they will all ask you to enter your application's callback URL. See below for the callback URL you must insert for now, later you can update it.

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

2. Now for Github, you have to setup an OAuth application on the GitHub (opens in a new tab) developers dashboard.

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

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

Now you are all set to authenticate users both with credentials and Social providers.

You can also add more providers like Facebook, Twitter, etc. by following the nextauth (opens in a new tab) guide.