Exploring the Next.js framework for the first time, I've dived into using Next-auth to handle sign-up/login functionality based on the provided documentation.
My experience so far has been smooth, especially with the MongoDB provider as recommended in the Next-auth documentation.
To send email notifications post-user login, I have integrated SendGrid using the URL sourced from MongoDB within my .env.local file:
EMAIL_SERVER_HOST=smtp.sendgrid.net
EMAIL_SERVER_PORT=587
EMAIL_SERVER_USER=apikey
EMAIL_SERVER_PASSWORD=<password>
EMAIL_FROM=<email>
MONGODB_URI=mongodb+srv://mdb:<password>@cluster0.uetg3.mongodb.net/learnnextauth?retryWrites=true&w=majority
In addition, I made modifications in pages/api/auth/lib/mongodb.js:
import { MongoClient } from "mongodb"
const uri = process.env.MONGODB_URI
const options = {
useUnifiedTopology: true,
useNewUrlParser: true,
}
let client
let clientPromise
if (!process.env.MONGODB_URI) {
throw new Error("Please add your Mongo URI to .env.local")
}
if (process.env.NODE_ENV === "development") {
if (!global._mongoClientPromise) {
client = new MongoClient(uri, options)
global._mongoClientPromise = client.connect()
}
clientPromise = global._mongoClientPromise
} else {
client = new MongoClient(uri, options)
clientPromise = client.connect()
}
export default clientPromise
Utilizing the EmailProvider from Next-auth and setting up configuration details in pages/api/auth/[...nextauth].js:
import EmailProvider from "next-auth/providers/email";
import NextAuth from "next-auth/next";
import { MongoDBAdapter } from "@next-auth/mongodb-adapter"
import clientPromise from "./lib/mongodb"
export default NextAuth({
adapter: MongoDBAdapter(clientPromise),
providers: [
EmailProvider({
server: {
host: process.env.EMAIL_SERVER_HOST,
port: process.env.EMAIL_SERVER_PORT,
auth: {
user: process.env.EMAIL_SERVER_USER,
pass: process.env.EMAIL_SERVER_PASSWORD
}
},
from: process.env.EMAIL_FROM
}),
],
})
Furthermore, I implemented a component in pages/index.js to control authenticated sessions:
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if(session) {
return <>
Signed in as {session.user.email} <br/>
<button onClick={() => signOut()}>Sign out</button>
</>
}
return <>
Not signed in <br/>
<button onClick={() => signIn()}>Sign in</button>
</>
}
Additionally, in pages/_app.js code snippet:
import { SessionProvider } from "next-auth/react"
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}
Lastly, settings from package.json were tweaked accordingly:
{
"name": "auth-v4",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@next-auth/mongodb-adapter": "^1.0.1",
"@popperjs/core": "^2.11.2",
"bootstrap": "^5.1.3",
"mongodb": "^4.3.1",
"next": "12.0.10",
"next-auth": "^4.2.1",
"nodemailer": "^6.7.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"typescript": "^4.5.5"
},
"devDependencies": {
"eslint": "^8.9.0",
"eslint-config-next": "12.0.10"
}
}
Looking to integrate MySQL instead of MongoDB due to specific requirements, here are some queries that I seek guidance on:
1- How can I correctly configure the MySQL URL within ".env.local"?
2- Are there any pre-built providers available for MySQL like the MongoDB adapter mentioned in Next-auth's documentation?
3- Besides "mysql" and "serverless-mysql", are there any additional dependencies required for MySQL integration?
Note: I am relying on MySQL Workbench for database management.
Your detailed assistance is highly appreciated as I strive to grasp the concepts thoroughly, given my novice status in the Next.js framework.
(Feel free to seek clarification if any part of my query seems unclear, considering English isn't my native language)
Thank you in advance for your support.