Next.js Discord

Discord Forum

Next-Auth

Unanswered
Turkish Angora posted this in #help-forum
Open in Discord
Turkish AngoraOP
Where the hell am I suppost to put nextauth and configure it?? first time ive actually tried making a good dashboard but idk how to make the login auth work!!! please help

102 Replies

joulev
What exactly do you need help on
Because just from this question content, we don’t even know where you want help
Turkish AngoraOP
i need help on placement of the nextauth file, cause if i place it in api/auth it says 404
Or read the [tutorial](https://nextjs.org/learn) which has one part explaining how to set up next-auth v5 beta
Siamese
from my experience only the beta5 works in v5 ^
joulev
Yes. If you try v5 you should use beta 5 or earlier since there is a standing bug. Actually beta 4 is better since beta 5 has a type bug as well if you use typescript
Turkish AngoraOP
where do i place nextauth.url like the .env file itself? in the app directory or root
I didn't notice anything
Turkish AngoraOP
[next-auth][warn][NO_SECRET]
https://next-auth.js.org/warnings#no_secret

code:

"use client"
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { getSession } from 'next-auth/react';
import Card from "../ui/dashboard/card/card";
import CommandLogs from "../ui/dashboard/command-logs/command-logs";
import styles from "../ui/dashboard/dashboard.module.css"
import Rightbar from "../ui/dashboard/rightbar/rightbar";

export default function Dashboard({ session, ...pageProps }) {
    const router = useRouter();

    useEffect(() => {
        const checkSession = async () => {
            const sessionData = await getSession();
            if (!sessionData) {
                router.push('/login'); // Redirect to login page if not signed in
            }
        };

        checkSession();
    }, []);

    // If session is not defined yet, render loading state or something else
    if (!session) {
        return <div>Loading...</div>;
    }

    return (
        <div className={styles.wrapper}>
            <div className={styles.main}>
                <div className={styles.cards}>
                    <Card />
                    <Card />
                    <Card />
                </div>
                <CommandLogs />
            </div>
            <div className={styles.side}>
                <Rightbar />
            </div>
        </div>
    );
}
Siamese
U have misconfigured ur provider
Turkish AngoraOP
discord is my provider
i signed in successfully but it says no secret when i go to page
the code i sent is for that page
also, where do i put my sessionprovider so i can retrieve details of the logged in user anywhere in my app? cause i dont have a _app file
do@joulevdo u have any idea of how i can do that?
@Siamese What type error?
joulev
https://github.com/nextauthjs/next-auth/issues/9802 and similar issues, only applicable to typescript users. Supposedly fixed but last time I checked it was still there
@Turkish Angora i signed in successfully but it says no secret when i go to page
Siamese
U need to add it into the config of the provider
Turkish AngoraOP
there is a secret there..
else it wouldnt have worked
Turkish AngoraOP
wait, do i have to use the same secret to decode?
@Turkish Angora there is a secret there..
Siamese
Screenshot
@Turkish Angora wait, do i have to use the same secret to decode?
Siamese
U need to use the secret from devportal
Turkish AngoraOP
i am
in env file, do i use the same secret?
[next-auth][error][JWT_SESSION_ERROR]
https://next-auth.js.org/errors#jwt_session_error decryption operation failed {
message: 'decryption operation failed',
stack: 'JWEDecryptionFailed: decryption operation failed\n' +
' at gcmDecrypt (webpack-internal:///(ssr)/./node_modules/jose/dist/node/cjs/runtime/decrypt.js:67:15)\n' +
' at decrypt (webpack-internal:///(ssr)/./node_modules/jose/dist/node/cjs/runtime/decrypt.js:92:20)\n' +
' at flattenedDecrypt (webpack-internal:///(ssr)/./node_modules/jose/dist/node/cjs/jwe/flattened/decrypt.js:143:52)\n' +
' at async compactDecrypt (webpack-internal:///(ssr)/./node_modules/jose/dist/node/cjs/jwe/compact/decrypt.js:18:23)\n' +
' at async jwtDecrypt (webpack-internal:///(ssr)/./node_modules/jose/dist/node/cjs/jwt/decrypt.js:8:23)\n' +
' at async Object.decode (webpack-internal:///(ssr)/./node_modules/next-auth/jwt/index.js:66:7)\n' +
' at async Object.session (webpack-internal:///(ssr)/./node_modules/next-auth/core/routes/session.js:43:28)\n' +
' at async AuthHandler (webpack-internal:///(ssr)/./node_modules/next-auth/core/index.js:165:27)\n' +
' at async getServerSession (webpack-internal:///(ssr)/./node_modules/next-auth/next/index.js:159:19)\n' +
' at async Dashboard (webpack-internal:///(ssr)/./app/dashboard/page.jsx:31:21)',
name: 'JWEDecryptionFailed'
}
null

this keeps happening btw
Siamese
Show full auth file
Maybe something else is wrong
Turkish AngoraOP
import { GetServerSidePropsContext, NextApiRequest, NextApiResponse } from 'next';
import NextAuth from 'next-auth';
import { NextAuthOptions } from 'next-auth';
import DiscordProvider from 'next-auth/providers/discord';
import { getServerSession } from "next-auth"

const options: NextAuthOptions = {
  providers: [
    DiscordProvider({
      clientId: "1166465149167751269",
      clientSecret: "REDACTED",
    }),
  ],
};

export function auth(...args: [GetServerSidePropsContext["req"], GetServerSidePropsContext["res"]] | [NextApiRequest, NextApiResponse] | []) {
    return getServerSession(...args, options)
}
const handler = NextAuth(options)
export { handler as GET, handler as POST}
dashboard page to retrieve session

"use client"
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { getSession } from 'next-auth/react';
import Card from "../ui/dashboard/card/card";
import CommandLogs from "../ui/dashboard/command-logs/command-logs";
import styles from "../ui/dashboard/dashboard.module.css"
import Rightbar from "../ui/dashboard/rightbar/rightbar";
import { getServerSession } from "next-auth/next"
import { options } from "app/api/auth/[...nextauth]/route.ts"

export default async function Dashboard() {
    const session = await getServerSession(options)

    console.log(session)

    return (
        <div className={styles.wrapper}>
            <div className={styles.main}>
                <div className={styles.cards}>
                    <Card />
                    <Card />
                    <Card />
                </div>
                <CommandLogs />
            </div>
            <div className={styles.side}>
                <Rightbar />
            </div>
        </div>
    );
}
Turkish AngoraOP
its just alot of exports
Siamese
I use the useSession function from the /react shit
Turkish AngoraOP
how can i integrate that
Siamese
Just const data = useSession()
U got data.status and data.session there
Turkish AngoraOP
/dashboard
⨯ node_modules\next-auth\react\index.js (119:0) @ useSession
⨯ Error: [next-auth]: useSession must be wrapped in a <SessionProvider />
at Navbar (./app/ui/dashboard/navbar/navbar.jsx:18:77)
Siamese
Do layout file
Why u don't have layout
Turkish AngoraOP
I do
2 seconds
@Siamese Why u don't have layout
Turkish AngoraOP
import { Inter } from 'next/font/google'
import './ui/globals.css'
const inter = Inter({ subsets: ['latin'] })
import { SessionProvider } from 'next-auth/react';

export const metadata = {
  title: 'new ukcc dashboard!??!',
  description: 'real',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
    <SessionProvider session={pageProps.session}>
    <body className={inter.className}>{children}</body>
    </SessionProvider>
    </html>
  )
}



heres my layout file as of now
pageprops idk how to do that stuff
Siamese
U dont need the session={}
Turkish AngoraOP
ok
[next-auth][error][JWT_SESSION_ERROR]
https://next-auth.js.org/errors#jwt_session_error decryption operation failed {
message: 'decryption operation failed',
stack: 'JWEDecryptionFailed: decryption operation failed\n' +
' at gcmDecrypt (webpack-internal:///(rsc)/./node_modules/jose/dist/node/cjs/runtime/decrypt.js:68:15)\n' +
' at decrypt (webpack-internal:///(rsc)/./node_modules/jose/dist/node/cjs/runtime/decrypt.js:91:20)\n' +
' at flattenedDecrypt (webpack-internal:///(rsc)/./node_modules/jose/dist/node/cjs/jwe/flattened/decrypt.js:137:52)\n' +
' at async compactDecrypt (webpack-internal:///(rsc)/./node_modules/jose/dist/node/cjs/jwe/compact/decrypt.js:20:23)\n' +
' at async jwtDecrypt (webpack-internal:///(rsc)/./node_modules/jose/dist/node/cjs/jwt/decrypt.js:10:23)\n' +
' at async Object.decode (webpack-internal:///(rsc)/./node_modules/next-auth/jwt/index.js:44:25)\n' +
' at async Object.session (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/session.js:25:34)\n' +
' at async AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:161:37)\n' +
' at async getServerSession (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:126:21)\n' +
' at async Dashboard (webpack-internal:///(rsc)/./app/dashboard/page.jsx:22:21)',
name: 'JWEDecryptionFailed'
}
null
⨯ node_modules\next-auth\react\index.js (451:10) @ SessionProvider
⨯ Error: React Context is unavailable in Server Components
at stringify (<anonymous>)
null
⨯ node_modules\next-auth\react\index.js (451:10) @ SessionProvider
⨯ Error: React Context is unavailable in Server Components
at stringify (<anonymous>)
digest: "4130670165"
null
Unhandled Runtime Error
Error: React Context is unavailable in Server Components
Siamese
I will send u my auth config soon
Turkish AngoraOP
ok
Is ur dashboard a "use client"?
Or no?
Turkish AngoraOP
let me see
no
Siamese
U should use await auth()
U import form auth config file
import NextAuth from "next-auth"
import Discord from "next-auth/providers/discord"
import type { NextAuthConfig } from "next-auth"

export const config = {
  session: {
    strategy: "jwt"
  },
  providers: [
    Discord({
      clientId: process.env.DISCORD_CLIENT_ID ?? "",
      clientSecret: process.env.DISCORD_CLIENT_SECRET ?? "",
      authorization: "https://discord.com/api/oauth2/authorize?scope=identify+email+guilds",
    }),
  ],
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        try {
          const response = await fetch('https://discord.com/api/users/@me/guilds', {
            headers: {
              Authorization: `Bearer ${account?.access_token}`,
            },
          });
          const guilds = await response.json();
          token.guilds = guilds.filter((guild: { owner: boolean, permissions: number }) =>
            guild.owner ||
            (guild.permissions & 0x20) === 0x20 || // ADMINISTRATOR permission
            (guild.permissions & 0x08) === 0x08 // MANAGE_GUILD permission
          );
        } catch {
          token.guilds = [];
        }
      }
      return token;
    },
    // @ts-expect-error
    async session({ session, token }) {
      // @ts-expect-error
      session.accessToken = token.accessToken;
      // @ts-expect-error
      session.user.guilds = token.guilds
      return session;
    },
  },
} satisfies NextAuthConfig

export const { handlers, auth, signIn, signOut } = NextAuth(config)
This is what I got
For server side session fetch
I import auth from this file
And do const session = await auth()
If no session, undefined
There's no status/data like on useSession
Turkish AngoraOP
⨯ node_modules\next-auth\react\index.js (451:10) @ SessionProvider
⨯ Error: React Context is unavailable in Server Components
at stringify (<anonymous>)
null
⨯ node_modules\next-auth\react\index.js (451:10) @ SessionProvider
⨯ Error: React Context is unavailable in Server Components
at stringify (<anonymous>)
digest: "20988985"
null
my only errors rn
its in a layout.js file
should it be tsx?
Turkish AngoraOP
import Navbar from "../ui/dashboard/navbar/navbar";
import Sidebar from "../ui/dashboard/sidebar/sidebar";
import styles from "../ui/dashboard/dashboard.module.css"
import { useSession } from 'next-auth/react';

const Layout = ({ children }) => {
    const [session, loading] = useSession();
    console.log(session)
    if (loading) {
        return <div>Loading...</div>;
    }
    return (
        <div className={styles.container}>
            <div className={styles.menu}>
            {session && <Sidebar username={session.username} />}
            </div>
            <div className={styles.content}>
                <Navbar />
                {children}
            </div>
        </div>
    )
}

export default Layout


@Siamese can i do this?
Siamese
I dont think so
no idea tbh
Turkish AngoraOP
how can i do it
like extract username
Siamese
status can be "authenticated", "loading", "unauthenticated"
Turkish AngoraOP
isnt there any username?
Siamese
u need to use the data.session for that
data.session.user.username i believe
Turkish AngoraOP
where do i get data from
can you make me an small snippet please
Siamese
i told u
const data = useSession()
Turkish AngoraOP
"React Context is unavailable in Server Components"
wait ill try an different approach
app\ui\dashboard\sidebar\sidebar.jsx (54:25) @ useSession

52 | ];
53 | const Sidebar = () => {
54 | const data = useSession()
| ^
55 | console.log(data)
56 | return (
57 | <div className={styles.container}>
Turkish AngoraOP
how can i secure my endpoints, also i keep getting { data: undefined, status: 'loading', update: [Function: update] }
Loading means it has auth but isn't ready yet
Turkish AngoraOP
how can i extract usernames wothout error of client component
Pacific herring
@Turkish Angora
check this tutorial
is complete
it explains you everything
get session datra client and server side and all the stuff you need
Turkish AngoraOP
foxed it
@Pacific herring https://www.youtube.com/watch?v=PrdbyNYq-z4&t
Turkish AngoraOP
thanks so much!!
Siamese
Can someone take a look at dis pls https://discord.com/channels/752553802359505017/1163034174811275385/1207416479797092362