Sign in leads to a 404: localhost:3000/api/auth/error

[arunsathiya]

I am new to React and nextjs in general, so any pointers on what I am doing wrong here would be very helpful. Thank you!

My nextjs and next-auth setup is as below:

index.jsx

import { Button } from "@chakra-ui/button"
import { Checkbox } from "@chakra-ui/checkbox"
import { FormControl, FormLabel } from "@chakra-ui/form-control"
import { Input } from "@chakra-ui/input"
import { Container, Flex, GridItem, Heading, SimpleGrid, Text, VStack } from "@chakra-ui/layout"
import { Select } from "@chakra-ui/select"
import Details from '../src/sections/details'
import Cart from '../src/sections/cart'

const IndexPage = () => {
  return (
    <Container maxW="container.xl" p={10}>
      <Flex h="100vh" py={20}>
        <Details />
        <Cart />
      </Flex>
    </Container>
  )
}

export default IndexPage

app.tsx

import { AppProps } from "next/app"
import { ChakraProvider } from "@chakra-ui/react"
import { Provider as AuthProvider } from "next-auth/client"

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <AuthProvider session={pageProps.session}>
      <ChakraProvider>
        <Component {...pageProps}/>
      </ChakraProvider>
    </AuthProvider>
  )
}

export default App

...nextauth.js

import NextAuth from "next-auth";
import GitHub from 'next-auth/providers/GitHub'

export default NextAuth({
    providers: [
        GitHub({
            clientId: process.env.GITHUB_CLIENT_ID,
            clientSecret: process.env.GITHUB_CLIENT_SECRET
        })
    ],
    debug: true
})

cart.jsx

import { Button } from "@chakra-ui/button";
import { Text, VStack } from "@chakra-ui/layout"
import { useSession, signin } from "next-auth/client";

const Cart = () => {
    const [ session, loading ] = useSession();

    return (
        <VStack
            w="full"
            h="full"
            p={10}
            spacing={10}
            alignItems="flex-start"
            bg="gray.50"
        >
        
        { !loading ? (
            <div>
                { !session ? (
                    <Button onClick={() => signin()}>This is a test</Button>
                ) : (
                    <Text>You are signed in.</Text>
                ) }
            </div>
        ) : null }

        </VStack>
    )
}

export default Cart;

What's happening

The sign in button appears okay, and when I click on it, it takes me to http://localhost:3000/api/auth/error which returns a 404. Since I have enabled debug mode, I see this on the console too:

GET http://localhost:3000/api/auth/providers
[HTTP/1.1 404 Not Found 26ms]

[next-auth][error][client_fetch_error] 
https://next-auth.js.org/errors#client_fetch_error providers SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

That in turn leads me to this documentation page. As I understand, NEXTAUTH_URL is only for production setup but even when I try setting NEXTAUTH_URL=http://localhost:3000 on .env file, I see a 404.

[arunsathiya]

I figured out the problem here! The file is named ...nextauth.js incorrectly. It must be [...nextauth].js instead.