It’s super easy to setup the auth flow in Next.js with NextAuth.js almost for everyone. But not for me since I made a stupid typo. I will reveal the mistake I made in the end of this article.
I follow the official documentation to setup my GitHub provider. And I use signIn API provided by next-auth/client. But I got 404 page after I triggered it.
I find out the client_id in the search params is empty. But I am sure I setup the GITHUB_ID and GITHUB_SECRET correctly. Therefore I look at the source code in next-auth/dist/client/index.js.
The sign-in process is:
1. get base url: ‘/api/auth’
2. get all provider: GET /api/auth/providers
3. check provider
4. if ok, get OAuth url for the provider: POST /api/auth/signin/github?
5. redirect client to OAuth url from last step
It’s interesting to find out next-auth do fetching in step2 and step4. So I open the server side code in next-auth/dist/server/index.js and look for the keyword: POST, signin and github.
Ok, almost there. I am pretty sure it’s not a bug of next-auth after I go through the implementation of routes.signin. So, I console log the request option to see if my environment variables are passed into NextAuth instance.
They are NOT! The clientId and clientSecret are undefined!
Then I realize that I have .evn.local instead of .env.local. After I fix the typo, it’s work. 😮
NextAuth.js is a real powerful authentication solution for Next.js. It’s really super easy to setup if you name the .env.local correctly. 😂
