NextAuth discord provider | got another question here

Answered

Siamese posted this in #help-forum

SiameseOP

2024-04-22T19:35:31.696Z

I'm getting an error like this:

[auth][error] MissingCSRF: CSRF token was missing during an action signin. .Read more at https://errors.authjs.dev#missingcsrf
    at validateCSRF (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/oauth/csrf-token.js:45:11)
    at AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:71:100)
    at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:126:34)
    at async C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:53191
    at async e_.execute (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:44492)
    at async e_.handle (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:54445)
    at async doRender (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\base-server.js:1377:42)
    at async cacheEntry.responseCache.get.routeKind (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\base-server.js:1587:40)
    at async DevServer.renderToResponseWithComponentsImpl (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\base-server.js:1507:28)
    at async DevServer.renderPageComponent (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\base-server.js:1924:24)
    at async DevServer.renderToResponseImpl (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\base-server.js:1962:32)
    at async DevServer.pipeImpl (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\base-server.js:920:25)
    at async NextNodeServer.handleCatchallRenderRequest (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\next-server.js:272:17)
    at async DevServer.handleRequestImpl (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\base-server.js:816:17)
    at async C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\dev\next-dev-server.js:339:20
    at async Span.traceAsyncFn (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\trace\trace.js:154:20)
    at async DevServer.handleRequest (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\dev\next-dev-server.js:336:24)
    at async invokeRender (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (C:\Users\Administrator\Desktop\Discord Stuff\tickety-stable-nextjs\node_modules\next\dist\server\lib\start-server.js:141:13)

Answered by American Crow

import { auth, signOut } from "@/app/auth"
import { discrodSignIn } from "./discord-server-action"

export default async function DiscordPage() {


    const session = await auth()

  return (
    <>
    <form
      action={discrodSignIn}
    >
      <button type="submit">Signin with Discord</button>

        <h1> User: {session?.user?.name} </h1>

    </form>
        <form
        action={async () => {
          "use server"
          await signOut()
        }}
      >
        <button type="submit">Sign Out</button>
      </form>
      </>
  )
}

"use server"
import { signIn } from "../auth"

export const discrodSignIn = async () => {
    "use server"
    await signIn("discord")
  }

View full answer

55 Replies

SiameseOP

2024-04-22T19:35:51.783Z

running nextauth v5

@Siamese running nextauth v5

Smultar.json

2024-04-23T04:01:21.328Z

IF YOU FIND A SOLUTION TO THIS PLEASE TELL ME

SiameseOP

2024-04-23T08:23:36.799Z

Bump

SiameseOP

2024-04-24T09:35:31.227Z

Bump

SiameseOP

2024-04-25T06:01:30.677Z

Bump

SiameseOP

2024-04-25T13:25:01.544Z

Bump 😦

American Crow

2024-04-25T13:27:40.518Z

ever bothered to read the link in the error message?

@American Crow ever bothered to read the link in the error message?

SiameseOP

2024-04-25T14:12:20.150Z

Yup

I don't understand it

American Crow

2024-04-25T14:42:34.314Z

Just did the whole process as described in next auth 5 docs. Including creating a discord app.
Everything works for me. I can sign in and read from the user obect.

Can't really reproduce the error. You'll have to share some code

@American Crow Just did the whole process as described in next auth 5 docs. Including creating a discord app. Everything works for me. I can sign in and read from the user obect. Can't really reproduce the error. You'll have to share some code

SiameseOP

2024-04-25T15:15:07.390Z

I will send it in a bit. Please ping me when you reply

Also, which signIn function did you use?

American Crow

2024-04-25T15:20:30.830Z

import { auth, signOut } from "@/app/auth"
import { discrodSignIn } from "./discord-server-action"

export default async function DiscordPage() {


    const session = await auth()

  return (
    <>
    <form
      action={discrodSignIn}
    >
      <button type="submit">Signin with Discord</button>

        <h1> User: {session?.user?.name} </h1>

    </form>
        <form
        action={async () => {
          "use server"
          await signOut()
        }}
      >
        <button type="submit">Sign Out</button>
      </form>
      </>
  )
}

"use server"
import { signIn } from "../auth"

export const discrodSignIn = async () => {
    "use server"
    await signIn("discord")
  }

Answer

@American Crow tsx import { auth, signOut } from "@/app/auth" import { discrodSignIn } from "./discord-server-action" export default async function DiscordPage() { const session = await auth() return ( <> <form action={discrodSignIn} > <button type="submit">Signin with Discord</button> <h1> User: {session?.user?.name} </h1> </form> <form action={async () => { "use server" await signOut() }} > <button type="submit">Sign Out</button> </form> </> ) } tsx "use server" import { signIn } from "../auth" export const discrodSignIn = async () => { "use server" await signIn("discord") }

SiameseOP

2024-04-25T15:38:30.775Z

Ahh you used signIn from the auth file. When I tried using that one it didn't let me on client side

@Siamese Ahh you used signIn from the auth file. When I tried using that one it didn't let me on client side

American Crow

2024-04-25T15:44:34.569Z

i tested both with "use client" and without both works

SiameseOP

2024-04-25T15:44:44.203Z

I will try again then

@American Crow i tested both with "use client" and without both works

SiameseOP

2024-04-25T16:51:53.621Z

⨯ unhandledRejection: Error: NEXT_REDIRECT
    at getRedirectError (webpack-internal:///(action-browser)/./node_modules/next/dist/client/components/redirect.js:49:19)
    at redirect (webpack-internal:///(action-browser)/./node_modules/next/dist/client/components/redirect.js:60:11)
    at signOut (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:68:73) {
  digest: 'NEXT_REDIRECT;replace;http://localhost:3000/;303;',
  mutableCookies: p {
    _parsed: Map(3) {
      'authjs.session-token.0' => [Object],
      'authjs.session-token.1' => [Object],
      'authjs.callback-url' => [Object]
    },
    _headers: HeadersList {
      cookies: [Array],
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    }
  }
}

aaa, i think i missed some env variable?

SiameseOP

2024-04-25T16:59:29.644Z

o, adding await fixed my issue

@Smultar.json fix found

use the functions from auth.ts file instead of nextauth/react

@Siamese use the functions from auth.ts file instead of nextauth/react

Smultar.json

2024-04-25T17:13:32.786Z

I can't do that, I get some errors regarding my database stuff.

Like dns package isnt found or other network packages

@Smultar.json Like dns package isnt found or other network packages

SiameseOP

2024-04-25T17:13:50.050Z

Show your code

Smultar.json

2024-04-25T17:15:48.929Z

import NextAuth from 'next-auth';

// Providers
import Discord from 'next-auth/providers/discord';
import Google from 'next-auth/providers/google';
import Patreon from 'next-auth/providers/patreon';

// Database
import mongo from '@/lib/services/mongodb';
import database from '@/lib/services/database';
import { MongoDBAdapter } from '@auth/mongodb-adapter';
import { ObjectId } from 'mongodb';

// User properties
import snowflake from '@/lib/services/snowflake';
import User from '../templates/user';

export const { handlers, signIn, signOut, auth } = NextAuth({
    // Ignore this error7
    // @ts-ignore
    adapter: MongoDBAdapter(mongo, {
        collections: {
            Users: 'fragments',
            Sessions: 'sessions',
            Accounts: 'accounts',
            VerificationTokens: 'tokens',
        },
        databaseName: 'login',
    }),

    // OAuth providers
    providers: [Discord, Google, Patreon],

    callbacks: {
        async signIn({ user, account, profile, email }) {
            // Database Object
            const db = await database;
            // Login logic, removed cause discord said its to long

        },

        // This is called when a user signs in with a provider.
        async session(callback: any) {
            // First time user
            if (callback.user.emailVerified === null) {
            // session logic, removed cause discord said its to long

        }
        return true;

        },
    },

    trustHost: true,

    session: {
        strategy: 'database',
        maxAge: 14 * 24 * 60 * 60, // 14 days
        updateAge: 24 * 60 * 60, // 24 hours
    },
});

so unless I need to make a seperate actions files, for sign/in/out, then use that on the client ends. I have been importing it directly from auth.ts

SiameseOP

2024-04-25T17:19:48.838Z

why u need the signIn calback

to use the singIn and singOut exported from auth.ts file i made a serverActions.ts file

bcz the functions gotta be "use server"

@Siamese why u need the signIn calback

Smultar.json

2024-04-25T17:23:30.955Z

Because when users sign in, I fetch data from my datanase and do stuff with it.

SiameseOP

2024-04-25T17:23:46.315Z

@Siamese bcz the functions gotta be "use server"

Smultar.json

2024-04-25T17:23:47.922Z

I'll try that in a bit

SiameseOP

2024-04-25T17:23:56.880Z

I dont get what you tried to do before

you just imported straight from auth.ts, right

Smultar.json

2024-04-25T17:24:12.344Z

Yeah

SiameseOP

2024-04-25T17:24:19.128Z

same as i tried

Smultar.json

2024-04-25T17:24:20.854Z

I even tried using the function thing.

SiameseOP

2024-04-25T17:24:37.254Z

but this is prolly way safer than using the nextauth/react one

Smultar.json

2024-04-25T17:24:50.736Z

It still gave me server error problems

about server components in client.

Yet again, I dont really use forms?

SiameseOP

2024-04-25T17:28:48.822Z

i dont use forms at all

"use server";

import { signIn as signInFunction } from "@/src/auth";

export async function signIn(callbackUrl?: {callbackUrl: string}) {
    "use server";
    await signInFunction("discord", callbackUrl);
}

this is how i made it

and in code i just import this and do signIn()

SiameseOP

2024-04-27T08:14:26.858Z

This method is safe against csrf, right?

SiameseOP

2024-05-05T11:43:46.497Z

anyone? should i do it like this?

SiameseOP

2024-05-06T08:13:13.702Z

SiameseOP

2024-05-07T18:45:23.292Z

SiameseOP

2024-05-10T10:45:58.766Z

SiameseOP

2024-05-10T12:28:31.102Z

American Crow

2024-05-10T13:29:50.934Z

You are updating this thread for 3 weeks continously (well gotta admire the dedication i guess) when you could just read the docs one time?
authjs docs say "signIn()handles CRSF protection for you"
https://authjs.dev/reference/nextjs/react#signin

If you want to make 100% sure, do a CSRF attack yourself:
https://owasp.org/www-project-web-security-testing-guide/latest/4-Web_Application_Security_Testing/06-Session_Management_Testing/05-Testing_for_Cross_Site_Request_Forgery#how-to-test

SiameseOP

2024-05-10T15:40:05.071Z

alr thanks

@American Crow You are updating this thread for 3 weeks continously (well gotta admire the dedication i guess) when you could just read the docs one time? authjs docs say "`signIn()`handles CRSF protection for you" https://authjs.dev/reference/nextjs/react#signin If you want to make 100% sure, do a CSRF attack yourself: https://owasp.org/www-project-web-security-testing-guide/latest/4-Web_Application_Security_Testing/06-Session_Management_Testing/05-Testing_for_Cross_Site_Request_Forgery#how-to-test

SiameseOP

2024-05-10T15:41:21.530Z

In the docs it doesn't say whenever I can safely use the server signIn on client side thru an server component/file instead of the ones imported from /react package

@Siamese In the docs it doesn't say whenever I can safely use the server signIn on client side thru an server component/file instead of the ones imported from /react package

American Crow

2024-05-10T22:20:02.101Z

They all use the same core/auth package internally. As long as you don't pass skipCSRFCheck you are fine.
https://authjs.dev/reference/nextjs#skipcsrfcheck

A server action within a client component is executed on the server just like the same code in a server component

SiameseOP

2024-05-10T22:20:22.315Z

thanks!