Authentication

Unlock interactive features for your users with NextAuth.

Unique SignIn modal

The SignIn modal will be called everytime it's needed (Connect button or interaction with auth-only features)

It will update with your data automatically but you can customize it the way you want in the /components/layout/sign-in-modal.tsx file.

SignIn Modal

Setup

Fill your .env file:

.env

NEXTAUTH_SECRET=

Enter any string or generate a unique one with this Generator.

Social Authentication

Google Auth is already pre-implemented, simply follow this guide:

1. Create a new project on Google Cloud
2. Access APIS & Services > Credentials > Configure Consent Screen

3. Fill in all the info.

4. Add userinfo.email and userinfo.profile to scope and Submit

5. On Credentials, click Create Credentials > OAuth Client ID

6. On Web Application add:

   1. Authorized JavaScript Origins > http://localhost:3000 & https://[YOURDOMAIN].com

   2. Authorized redirect URLs > http://localhost:3000/api/auth/callback/google & https://[YOURDOMAIN].com/api/auth/callback/google

7. Submit

8. OAuth Consent Screen > Publish App

Finally, copy your Client ID and Client Secret to the .env file:

.env

# Google Auth
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

If you need more social authentication options, NextAuth offers a wide choice, which you can find here.

(GitHub, Facebook, Apple, Discord...)

Google Auth SIgnIn is now fully functional!

Magic Link

Traditional email/password authentication is becoming obsolete for obvious security reasons. Magic Links allows you not to store your users' passwords in your database, thus relieving you of responsibility.

To enable this option, you need an email SMTP server, provided here by Loops.

👉 Check the Emails section to get started.

Your email SIgnIn is now fully functional!