Authentication

Unlock interactive features for your users with Better Auth.

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

BETTER_AUTH_SECRET=
NEXT_PUBLIC_APP_URL=http://localhost:3000

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, Better Auth offers various providers including GitHub, Facebook, Apple, Discord, and more. Check the Better Auth documentation for the complete list.

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!