Not able to solve csrf issue

[shubhank-saxena]

Hello. I tried to setup google envs using the guide - https://next-auth.js.org/providers/google
But I am still getting the following error. Is there something that I am doing wrong?
Thank you for this fantastic project!

[ndom91]

You only want to use the Google Provider? Can you show me the contents of your src/pages/api/auth/[...nextauth].js file?

You may need to comment out the remaining Email and Github provider related code.

Let me know if that works for you, and I'll adjust it to be dynamic going forward

[shubhank-saxena]

Thank you for the quick response @ndom91 !
I did comment on the email and GitHub code but still getting the same error. Below is the content of the file for your reference.

import NextAuth from 'next-auth'
// import GithubProvider from 'next-auth/providers/github'
import GoogleProvider from 'next-auth/providers/google'
// import EmailProvider from 'next-auth/providers/email'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import prisma from '@/lib/prisma'

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    // GithubProvider({
    //   clientId: process.env.GITHUB_ID,
    //   clientSecret: process.env.GITHUB_SECRET,
    // }),
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    // EmailProvider({
    //   server: process.env.SMTP_SERVER,
    //   from: 'briefkasten@ndo.dev',
    // }),
  ],
  pages: {
    signIn: '/auth/signin',
  },
  callbacks: {
    async session({ session, user }) {
      session.user.userId = user.id
      return session
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
  debug: process.env.NODE_ENV !== 'production',
}

export default NextAuth(authOptions)

[sjbr]

npm run db:push

[shubhank-saxena]

Same error after this @sjbr

[ndom91]

Hey everyone, haven't forgotten about this, just travelling at the moment. Will take a closer look next week 👍

[shubhank-saxena]

Hey @ndom91 sorry for the nudge but any update on this?

[ndom91]

@shubhank-saxena hey so I'm not able to reproduce this locally.

My steps were:

1. Clone a completely fresh copy of the repository
2. Copy .env.example to .env
3. Setup the following env vars:
   3a. DATABASE_URL=file:./db.sqlite
   3b. NEXTAUTH_URL=http://localhost:3001
   3c. NEXTAUTH=SECRET=abc123 (output of openssl rand -hex 32)
   3d. GOOGLE_ID/GOOGLE_SECRET according to my Google OAuth setup
4. Run pnpm db:push
5. Run pnpm dev - starts dev server at http://localhost:3001

I was then able to successfully go to /auth/signin and click on "Signin with Google" and complete the OAuth login.

Any of those env vars / steps you maybe did not complete?

Note: default DB is set to Postgres, but shouldn't matter. I just used SQLite here to be able to quickly spin up a reproduction. To do so, I had to delete the @db.Text annotations on certain columns in the /prisma/schema.prisma file though.

[shubhank-saxena]

Hey @ndom91, thank you for your response. I cleaned, installed everything and ran everything according to the above steps that you followed. But I am again getting the same issue.
This is what my .env looks like

Btw I am on a Macbook M1 Air (if that helps)

[ndom91]

Hey @ndom91, thank you for your response. I cleaned, installed everything and ran everything according to the above steps that you followed. But I am again getting the same issue.
This is what my .env looks like

Btw I am on a Macbook M1 Air (if that helps)

Hmm okay, and you're visiting your site via localhost:3000 as well? Not some sort of reverse proxy setup?

[shubhank-saxena]

Hey @ndom91, thank you for your response. I cleaned, installed everything and ran everything according to the above steps that you followed. But I am again getting the same issue.
This is what my .env looks like

Btw I am on a Macbook M1 Air (if that helps)

Hmm okay, and you're visiting your site via localhost:3000 as well? Not some sort of reverse proxy setup?

3000 is not loading to anything. 3001 is showing this error. No proxy setup. I am running locally

[ndom91]

Hey @ndom91, thank you for your response. I cleaned, installed everything and ran everything according to the above steps that you followed. But I am again getting the same issue.
This is what my .env looks like

Btw I am on a Macbook M1 Air (if that helps)

Hmm okay, and you're visiting your site via localhost:3000 as well? Not some sort of reverse proxy setup?

3000 is not loading to anything. 3001 is showing this error. No proxy setup. I am running locally

Ahh okay, so this is a quirk of my local setup, I have it all running on 3001 because I often have my work dev app running on 3000. I should have made this more clear for users who want to use 3000 instead.

So if you want to use 3000, as you have defined in your NEXTAUTH_URL, you must also change the port the dev server runs on. You can do this by removing the -p 3001 flag passed to the next dev server in the dev npm script.

Basically, it doesn't matter which port you chose, it just all has to match - the dev server, the nextauth settings, and I believe the URLs you entered as callback urls when setting up the github/google oauth clients for development as well

[shubhank-saxena]

Yay! It's working 🎊
The error was because -p 3001 was mentioned in package.json, and the .env.example had 3000 as one.
Thank you so much for your help!