briefkasten icon indicating copy to clipboard operation
briefkasten copied to clipboard

Not able to solve csrf issue

Open shubhank-saxena opened this issue 2 years ago • 5 comments

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!

Screenshot 2022-07-17 at 10 48 31 PM

shubhank-saxena avatar Jul 17 '22 17:07 shubhank-saxena

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

ndom91 avatar Jul 18 '22 16:07 ndom91

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: '[email protected]',
    // }),
  ],
  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)

shubhank-saxena avatar Jul 21 '22 05:07 shubhank-saxena

npm run db:push

sjbr avatar Jul 23 '22 00:07 sjbr

Same error after this @sjbr

shubhank-saxena avatar Jul 23 '22 07:07 shubhank-saxena

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

ndom91 avatar Jul 29 '22 07:07 ndom91

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

shubhank-saxena avatar Aug 15 '22 04:08 shubhank-saxena

@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.

ndom91 avatar Aug 19 '22 20:08 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 Screenshot_2022-08-21_at_6_32_40_PM

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

shubhank-saxena avatar Aug 21 '22 13:08 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 Screenshot_2022-08-21_at_6_32_40_PM

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?

ndom91 avatar Aug 21 '22 13:08 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 Screenshot_2022-08-21_at_6_32_40_PM 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

shubhank-saxena avatar Aug 21 '22 18:08 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 Screenshot_2022-08-21_at_6_32_40_PM 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

ndom91 avatar Aug 21 '22 19:08 ndom91

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!

shubhank-saxena avatar Aug 22 '22 10:08 shubhank-saxena