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 🔐
- 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.
- 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.
- Now, you need to connect to database to store user details, we have used
postgreSQL
andprisma
for this project. So get your database url and update the connection string in the.env
file.
DATABASE_URL=
- 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
- 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 🌐
- Go to the Google Developer Console (opens in a new tab) and create a new project and get the
client id
andclient 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
- 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.