Using Mysql provider rather than MongoDB provider in Next.js (Next-auth)

Question

I am new to Next.js framework and currently I am using Next-auth to be able to sign-up/login following the documentation.

So far everything is working fine and I used MongoDB provider listed in Next-auth documentation.

I am using SnedGrid to send an email after the user login and using the URL provided from MongoDB as follow:

.env.local

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

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

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
    }),
  ],
})

pages>index.js:

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>
</>
}

pages>_app.js:

import { SessionProvider } from "next-auth/react"

export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
  <Component {...pageProps} />
</SessionProvider>
)
}

package.json:

{
"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"
}
}

I tried to find Mysql provider in the documentations but i couldn't find it (Most of the tutorials online are using MnogoDB but i need to use Mysql).

So I have few questions:

1- What is the correct URL for Mysql to add it to ".env.local"?

2- Is there any ready provider for Mysql (such as MongoDB provider that listed in Next-auth documentation)?

3- Is there any dependency that i need to add other than "mysql" and "serverless-mysql"?

Note: I am using Mysql Workbench

Please do help me in detailed way so i can understand the concept not just copy/paste and be patient with me because as i mentioned I am new to Next.js framework

(Do let me know if you didn't understand anything i mentioned because English isn't my mother tongue)

Thank you in advance.

Here's how you can create a custom adapter: https://next-auth.js.org/tutorials/creating-a-database-adapter Just insert your mysql queries in there basically. — , Feb 16 '22 at 08:07

score 0 · Answer 1 · answered Sep 24 '22 at 04:12

yes, NextAuth doesn't have a lot of examples when it comes to mySQL setup.

You can try this in your [...nextauth].js file...

providers: [...],  
    adapter: TypeORMLegacyAdapter({
    type: 'mysql',
    database: process.env.MYSQL_DATABASE,
    username: process.env.MYSQL_USER,
    password: process.env.MYSQL_PASSWORD,
  }),

then in your .env.local file enter your variables...

MYSQL_HOST = 127.0.0.1
MYSQL_PORT = 3306
MYSQL_DATABASE = xxxxx
MYSQL_USER = xxxxxx
MYSQL_PASSWORD = xxxxx

Hope this helps. If you did something else post it for us to see.

Using Mysql provider rather than MongoDB provider in Next.js (Next-auth)

1 Answers1