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.
Setup
Fill your .env
file:
Enter any string or generate a unique one with this Generator.
Social Authentication
Google Auth is already pre-implemented, simply follow this guide:
Create a new project on Google Cloud
Access
APIS & Services
>Credentials
>Configure Consent Screen
Fill in all the info.
Add
userinfo.email
anduserinfo.profile
to scope and SubmitOn
Credentials
, click Create Credentials > OAuth Client IDOn
Web Application
add:Authorized JavaScript Origins
> http://localhost:3000 & https://[YOURDOMAIN].comAuthorized redirect URLs
> http://localhost:3000/api/auth/callback/google & https://[YOURDOMAIN].com/api/auth/callback/google
Submit
OAuth Consent Screen
> Publish App
Finally, copy your Client ID and Client Secret to the .env
file:
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!
Last updated