Next.js Discord

Discord Forum

Error: async/await is not yet supported in Client Components, only Server Components. This error is

Answered
Atlantic mackerel posted this in #help-forum
Open in Discord
Atlantic mackerelOP
Hey guys, im trying to retrieve google user id via useSession I tried this :


"use client"
import Image from "next/image";
import GoogleLightButton from "@/public/google/web_neutral_sq_na@3x.png";

import {signIn, useSession} from "next-auth/react";
import {Button} from "@/components/ui/button";

const SigninButton = async () => {
    const { data: session, status } = useSession()
    console.log(session?.user.email)
    return (
        <div className="hover:cursor-pointer">
            <Button variant="google" onClick={(event) => {
                signIn("google")
                console.log(process.env.GITHUB_CLIENT_ID)
            }}>
                <Image
                    priority
                    src={GoogleLightButton}
                    alt="Follow us on Twitter"
                    width={40}
                />

                Continue with Google
            </Button>
        </div>
    )
}

export default SigninButton

but the error said: 
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

anyone know how to fix it ?
Answered by Ray
remove async 
const SigninButton = () => {
View full answer

112 Replies

Answer
@Ray remove async ts const SigninButton = () => {
Atlantic mackerelOP
the error has changed
 ⨯ Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />
    at SigninButton (./components/provider/signin-button.tsx:18:98)

Am I have to add SessionProvider on Button components?
@Atlantic mackerel the error has changed ⨯ Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider /> at SigninButton (./components/provider/signin-button.tsx:18:98) Am I have to add SessionProvider on Button components?
Ray
// app/provider.tsx
'use client'

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

export default function Provider({children}) {
  return (
    <SessionProvider>
      {children}
    </SessionProvider>
  )
}

// app/layout.tsx
import Provider from './provider'

export default function RootLayout({children}) {

  return (
    <html>
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  )
}
@Ray ts // app/provider.tsx 'use client' import {SessionProvider} from 'next-auth/react' export default function Provider({children}) { return ( <SessionProvider> {children} </SessionProvider> ) } // app/layout.tsx import Provider from './provider' export default function RootLayout({children}) { return ( <html> <body> <Provider>{children}</Provider> </body> </html> ) }
Atlantic mackerelOP
Thank you but when I tried this

const SigninButton = () => {
    const { data: session, status } = useSession()
    console.log(session?.user.email)
    return (
        <div className="hover:cursor-pointer">
            <Button variant="google" onClick={(event) => {
                signIn("google")
                console.log(process.env.GITHUB_CLIENT_ID)
            }}>
                <Image
                    priority
                    src={GoogleLightButton}
                    alt="Follow us on Twitter"
                    width={40}
                />

                Continue with Google
            </Button>
        </div>
    )
}

It still return undefined
@Atlantic mackerel Thank you but when I tried this ts const SigninButton = () => { const { data: session, status } = useSession() console.log(session?.user.email) return ( <div className="hover:cursor-pointer"> <Button variant="google" onClick={(event) => { signIn("google") console.log(process.env.GITHUB_CLIENT_ID) }}> <Image priority src={GoogleLightButton} alt="Follow us on Twitter" width={40} /> Continue with Google </Button> </div> ) } It still return undefined
Ray
import {useRouter} from 'next/navigation'

const SigninButton = () => {
    const { data: session, status } = useSession()
    const router = useRouter()
    console.log(session?.user.email)
    return (
        <div className="hover:cursor-pointer">
            <Button variant="google" onClick={async (event) => {
                await signIn("google")
                router.refresh()
                console.log(process.env.GITHUB_CLIENT_ID)
            }}>
                <Image
                    priority
                    src={GoogleLightButton}
                    alt="Follow us on Twitter"
                    width={40}
                />

                Continue with Google
            </Button>
        </div>
    )
}
@Atlantic mackerel it's still the return undifined
Ray
where return undefined?
@Ray where return undefined?
Atlantic mackerelOP
session?.user.email I think here 'cause when I changed message logged in GITHUB_CLIENT it returned nothing
@Ray do you mean `session?.user.email ` undefined?
Atlantic mackerelOP
yeah
Ray
console.log(process.env.GITHUB_CLIENT_ID)
I'm pretty sure this line will log undefined
@Atlantic mackerel yeah
Ray
could you show your next-auth config
@Ray could you show your next-auth config
Atlantic mackerelOP
I did this 

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"
import Google from "next-auth/providers/google"

export const authOptions = {
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_CLIENT_ID as string,
            clientSecret: process.env.GITHUB_CLIENT_PASSWORD as string,
        }),
        Google({
            clientId: process.env.GOOGLE_CLIENT_ID as string,
            clientSecret: process.env.GOOGLE_CLIENT_PASSWORD as string
        })
    ],
    pages: {
        signIn: "/login"
    },
    callbacks: {
        async signIn({email, password}: any) {

            console.log("test " + email + password)
            return true;
        }
    }
}

const handlers = NextAuth(authOptions)
export {handlers as GET, handlers as POST}
@Atlantic mackerel it's still the return undifined
Ray
have you signed in successfully?
Atlantic mackerelOP
andd I wonder why this message has occured

[next-auth][warn][NO_SECRET] 
https://next-auth.js.org/warnings#no_secret

even I already register secret key
@Ray have you signed in successfully?
Atlantic mackerelOP
Yeah signin work perfectly
@Ray how did you setup the secret key?
Atlantic mackerelOP
I setup all my secret key on .env.local
@Atlantic mackerel Yeah signin work perfectly
Ray
and try refresh the page and check the log for session?.user.email
@Atlantic mackerel I setup all my secret key on `.env.local`
Ray
NEXTAUTH_SECRET=secret right?
@Ray and try refresh the page and check the log for `session?.user.email`
Atlantic mackerelOP
oh andd did you know any google signin api docs? Ive been search it lots but I cant found it
@Ray `NEXTAUTH_SECRET=secret` right?
Atlantic mackerelOP
I setup like this
@Atlantic mackerel I setup like this
Ray
add NEXTAUTH_SECRET=your-secret-key
@Ray what doc?
Atlantic mackerelOP
like google acount api 'cause I don't know what's parameters are existed on session
    const { data: session, status } = useSession()
    const router = useRouter()
    console.log(session?.user.email)
Ray
the session object look like this
{
  user?: {
    name?: string | null
    email?: string | null
    image?: string | null
  }
  expires?: string
}
@Atlantic mackerel ahh is it same keys on any other language?
Ray
what do you mean by any other language?
@Ray what do you mean by any other language?
Atlantic mackerelOP
like rust, dart, C++
@Atlantic mackerel like rust, dart, C++
Ray
Im confused lol
@Ray Im confused lol
Atlantic mackerelOP
hahaha btw still the same

I tried this:

    const { data: session, status } = useSession()
    const router = useRouter()
    console.log("session, " +session?.user.email)


session, undefined
Ray
how about this?
console.log("session", session)
@Ray how about this? ts console.log("session", session)
Atlantic mackerelOP
it returend
session undefined
@Atlantic mackerel it returend session undefined
Ray
check the cookies on your browser
do you have the session cookie?
@Ray check the cookies on your browser
Atlantic mackerelOP
I did this on main app

export function MainCookieProvider({
                                       children
                                   }: {
    children: React.ReactNode
}) {
    const [cookies, setCookie, removeCookie] = useCookies(["user"]);
    const [user, setUser] = useState<User>(cookies.user || null)
    const ClientProviderOverride = ClientProvider as any;

    return (
        <SessionProvider>
            {
                user ?
                    <ThemeProvider
                        attribute="class"
                        enableSystem
                        disableTransitionOnChange
                    >
                        <ClientProviderOverride>
                            {children}
                        </ClientProviderOverride>
                    </ThemeProvider> :
                    <MainLayoutProvider>
                        {children}
                    </MainLayoutProvider>
            }
        </SessionProvider>
    )
}
@Ray so do you have the cookie on the browser?
Atlantic mackerelOP
I have just these cookies
@Atlantic mackerel I have just these cookies
Ray
ok look good
@Atlantic mackerel I have just these cookies
Ray
where do you use useSession()?
@Ray where do you use `useSession()`?
Atlantic mackerelOP
I used it on button props

const SigninButton = () => {
    const { data: session, status } = useSession()
    const router = useRouter()
    console.log("session", session)
    return (
        <div className="hover:cursor-pointer">
            <Button variant="google" onClick={async (event) => {
                await signIn("google")
                console.log("github : " + process.env.GITHUB_CLIENT_ID)

                router.refresh()
            }}>
                <Image
                    priority
                    src={GoogleLightButton}
                    alt="Follow us on Twitter"
                    width={40}
                />

                Continue with Google
            </Button>
        </div>
    )
}
Ray
try log the status too
console.log('status', status)
@Ray try log the status too `console.log('status', status)`
Atlantic mackerelOP
it return
status loading
Ray
check the browser console
are you checking the server console?
@Ray are you checking the server console?
Atlantic mackerelOP
I've been testing on secret browser but this would be the reason of loading status?
@Atlantic mackerel I've been testing on secret browser but this would be the reason of `loading` status?
Ray
it should be loading at first and then authenticated or unauthenticated
Atlantic mackerelOP
When I tried to connect normal chrome browser I just got this 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' +

}
@Atlantic mackerel I have just these cookies
Ray
clear these cookie and try to signin again
@Ray yes because you just added the secret
Atlantic mackerelOP
This one?
@Atlantic mackerel This one?
Ray
yes
remove the cookies and signin again
Atlantic mackerelOP
Ok I'll try it
btw how can I delete the browser cookies?
I delete all cookie on my localhost but the cookie won't disappeared
@Atlantic mackerel I have just these cookies
Ray
go to here
@Atlantic mackerel I have just these cookies
Ray
do you see the cross button
next to the filter input
@Ray next to the filter input
Atlantic mackerelOP
I deleted all cookies and click again, it just redirect login page
andd
   callbacks: {
        async signIn({email, password}: any) {

            console.log("test " + email + password)
            return true;
        }
    }

This return undefined

test undefinedundefined
@Atlantic mackerel I deleted all cookies and click again, it just redirect login page
Ray
the SigninButton render in /login right?
@Ray the `SigninButton` render in `/login` right?
Atlantic mackerelOP
yeah exactly
@Atlantic mackerel yeah exactly
Ray
it redirect you back to /login after you press it?
@Ray it redirect you back to /login after you press it?
Atlantic mackerelOP
Yeah just redirect to /login even when I deleted cookies
@Atlantic mackerel Yeah just redirect to /login even when I deleted cookies
Ray
go to http://localhost:3000/api/auth/signin
and press google sign in
@Ray go to `http://localhost:3000/api/auth/signin`
Atlantic mackerelOP
http://localhost:8080/api/auth/callback/google this is my api url but just go to http://localhost:3000/api/auth/signin ?
just ignore the port Lmao
Ray
go to http://localhost:8080/api/auth/signin if your server is running on 8080
Atlantic mackerelOP
but still the same as original
Atlantic mackerelOP
just redirect to itself
@Atlantic mackerel just redirect to itself
Ray
do you have middleware.ts?
@Ray do you have `middleware.ts`?
Atlantic mackerelOP
ahhh I didnt add it
@Atlantic mackerel ahhh I didnt add it
Ray
ok its fine
so you go to http://localhost:8080/api/auth/signin and it redirect you to /login?
should I add middleware?
Atlantic mackerelOP
When I click that google
jump on here
@Atlantic mackerel Click to see attachment
Ray
try it on different browser
go to http://localhost:8080/api/auth/signin
Atlantic mackerelOP
I tried on secret browser
@Atlantic mackerel Click to see attachment
Ray
any error on console?
@Ray any error on console?
Atlantic mackerelOP
nothing just return undefined
    callbacks: {
        async signIn({email, password}: any) {

            console.log("test " + email + password)
            return true;
        }
    }


test undefinedundefined
Atlantic mackerelOP
github works fine
@Atlantic mackerel Click to see attachment
Ray
have you sign in successfully with google sign in before?
@Ray have you sign in successfully with google sign in before?
Atlantic mackerelOP
Yeah sign in was successfully work but just the variable return undefined
@Atlantic mackerel Yeah sign in was successfully work but just the variable return undefined
Ray
which variable? the callbacks or the session?
try to sign in with github
@Ray which variable? the callbacks or the session?
Atlantic mackerelOP
it return
test undefinedundefined

too
@Ray which variable? the callbacks or the session?
Atlantic mackerelOP
yeah the useSession
@Atlantic mackerel yeah the `useSession`
Ray
so you signed in with github now, what do you see the log from useSession?
@Atlantic mackerel it return test undefinedundefined too
Ray
the signin callback look like this
async signIn({ user, account, profile, email, credentials }) {}

when you signin with oauth, I think the data should be in account and profile
@Ray so you signed in with github now, what do you see the log from `useSession`?
Atlantic mackerelOP
I just got it!!
its soooo hard
@Atlantic mackerel Click to see attachment
Ray
and you should check the log on browser, if you are using useSession() hook
Atlantic mackerelOP
Yeahhh It works too
You made my day brooo