I cannot found "Get, Post" in Auth handlers

Answered

Atlantic mackerel posted this in #help-forum

Atlantic mackerelOP

2024-02-01T00:45:29.000Z

hey guys, im trying to add auth on my website. so I create my authOption and retrieve GET,POST methods from NextAuth but cannot found

I tried 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: "/auth/signIn"
    }
}

export const handlers = NextAuth(authOptions)


export const {GET, POST} = handlers

Answered by Ray

and change the export to this
export { handlers as GET, handlers as POST }

View full answer

68 Replies

@Atlantic mackerel hey guys, im trying to add auth on my website. so I create my authOption and retrieve GET,POST methods from `NextAuth` but cannot found I tried this ts 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: "/auth/signIn" } } export const handlers = NextAuth(authOptions) export const {GET, POST} = handlers

Ray

2024-02-01T00:48:32.000Z

export the GET and POST from app/api/auth/[...nextauth]/route.ts

@Ray export the `GET` and `POST` from `app/api/auth/[...nextauth]/route.ts`

Atlantic mackerelOP

2024-02-01T00:49:25.000Z

I just did this but it shouldn't be on this file?

Ray

2024-02-01T00:49:50.000Z

const handler = NextAuth(authOptions)

and authOptions

just export const { GET, POST} = handlers

@Ray just `export const { GET, POST} = handlers`

Atlantic mackerelOP

2024-02-01T00:51:25.000Z

like this?

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: "/auth/signIn"
    }
}

const handler = NextAuth(authOptions)
export const {GET, POST} = handler

@Atlantic mackerel like this? ts 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: "/auth/signIn" } } const handler = NextAuth(authOptions) export const {GET, POST} = handler

Ray

2024-02-01T00:51:47.000Z

yes

Ray

2024-02-01T00:52:07.000Z

oh wait, you path is wrong

@Ray yes

Atlantic mackerelOP

2024-02-01T00:52:11.000Z

Thank youu and just use signIn function on my button?

Ray

2024-02-01T00:52:22.000Z

app/api/auth/[...nextauth]/route.ts

@Ray app/api/auth/[...nextauth]/route.ts

Atlantic mackerelOP

2024-02-01T00:52:44.000Z

ahhhh

@Ray app/api/auth/[...nextauth]/route.ts

Atlantic mackerelOP

2024-02-01T00:53:43.000Z

but when i tried withsignIn function just redirect to error page like this

http://localhost:8080/api/auth/error

@Atlantic mackerel but when i tried with`signIn` function just redirect to error page like this http://localhost:8080/api/auth/error

Ray

2024-02-01T00:54:28.000Z

your server running on port 8080?

@Ray your server running on port 8080?

Atlantic mackerelOP

2024-02-01T00:54:38.000Z

yeah

Ray

2024-02-01T00:54:46.000Z

does it work if you go to /api/auth/signin?

Atlantic mackerelOP

2024-02-01T00:54:49.000Z

@Ray does it work if you go to `/api/auth/signin`?

Atlantic mackerelOP

2024-02-01T00:55:31.000Z

no doens't work the page

Ray

2024-02-01T00:55:48.000Z

what do you see

Atlantic mackerelOP

2024-02-01T00:56:00.000Z

I just change url on chrome

@Atlantic mackerel Click to see attachment

Ray

2024-02-01T00:56:17.000Z

how does your folder structure look like now?

Atlantic mackerelOP

2024-02-01T00:56:38.000Z

Like this

Ray

2024-02-01T00:56:58.000Z

you didn't change the path yet

app/api/auth/[...nextauth]/route.ts

@Ray app/api/auth/[...nextauth]/route.ts

Atlantic mackerelOP

2024-02-01T00:57:21.000Z

ahhhh I have to change route in auth folder

Ray

2024-02-01T00:57:27.000Z

yes

Ray

2024-02-01T00:57:53.000Z

and change the export to this
export { handlers as GET, handlers as POST }

Answer

@Ray and change the export to this `export { handlers as GET, handlers as POST }`

Ray

2024-02-01T00:58:21.000Z

wait, are you using next-auth v4 or v5?

@Ray wait, are you using next-auth v4 or v5?

Atlantic mackerelOP

2024-02-01T00:58:37.000Z

how can I check it?

Ray

2024-02-01T00:58:49.000Z

package.json

@Ray wait, are you using next-auth v4 or v5?

Atlantic mackerelOP

2024-02-01T00:59:24.000Z

opps I use ^4.24.5

Should I upgrade it?

@Ray and change the export to this `export { handlers as GET, handlers as POST }`

Ray

2024-02-01T01:00:02.000Z

then use this export

@Ray then use this export

Atlantic mackerelOP

2024-02-01T01:00:24.000Z

Ahh just like this?

const handlers = NextAuth(authOptions)
export { handlers as GET, handlers as POST  }

Ray

2024-02-01T01:00:29.000Z

yes

Atlantic mackerelOP

2024-02-01T01:01:12.000Z

The error has changed hahaha

@Atlantic mackerel Click to see attachment

Ray

2024-02-01T01:02:54.000Z

you go to this url?

or you press the sign in

@Ray or you press the sign in

Atlantic mackerelOP

2024-02-01T01:03:16.000Z

just pressed the signin button

and my signIn button just look like this

"use client"
import Image from "next/image";
import GoogleLightButton from "@/public/google/web_dark_sq_SI.svg";

import {signIn} from "next-auth/react";


const SigninButton = async () => {
    return (
        <div className="hover:cursor-pointer">
            <button onClick={(event) => {
                signIn("")
                console.log(process.env.GITHUB_CLIENT_ID)
            }}>
                <Image
                    priority
                    src={GoogleLightButton}
                    alt="Follow us on Twitter"
                />
            </button>

        </div>
    )
}

export default SigninButton

@Atlantic mackerel and my signIn button just look like this ts "use client" import Image from "next/image"; import GoogleLightButton from "@/public/google/web_dark_sq_SI.svg"; import {signIn} from "next-auth/react"; const SigninButton = async () => { return ( <div className="hover:cursor-pointer"> <button onClick={(event) => { signIn("") console.log(process.env.GITHUB_CLIENT_ID) }}> <Image priority src={GoogleLightButton} alt="Follow us on Twitter" /> </button> </div> ) } export default SigninButton

Ray

2024-02-01T01:04:48.000Z

signIn("google")

Atlantic mackerelOP

2024-02-01T01:05:40.000Z

Ahhh

I think for now it just kinda like setup my google app from console

@Atlantic mackerel Ahhh

Ray

2024-02-01T01:06:24.000Z

add http://localhost:3000 to the callback url on google

Atlantic mackerelOP

2024-02-01T01:07:33.000Z

@Ray add http://localhost:3000 to the callback url on google

Atlantic mackerelOP

2024-02-01T01:08:13.000Z

just put on this http://localhost:3000/ url?

@Atlantic mackerel Click to see attachment

Ray

2024-02-01T01:08:21.000Z

http://localhost:8080/api/auth/callback/google

Atlantic mackerelOP

2024-02-01T01:08:48.000Z

But the error still same

Ray

2024-02-01T01:09:23.000Z

restart the server and try again

and make sure you have correct client id and client secret

Atlantic mackerelOP

2024-02-01T01:10:16.000Z

I just kinda werid 'cause I have already put my secret and url

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: "app/api/auth/[...nextauth]/route.ts"
    }
}