CODEWITHSUNDEEP
next.jshttp-status-code-401app-routerclerk
Yanick Larouche
Yanick Larouche

Reputation: 51

Clerk Auth - GET http://localhost:3000/ 401 (Unauthorized) - 401 Loop after Signin/Signout

Good day,

I have been trying to setup Clerk on Next lastest version with the app the App router.

I have went through the well written docs and it seem pretty straighforward to setup so I gave it a shot on a new project I have been working on.

I have followed the get started instructions provided by CLerk without sucess: https://clerk.com/docs/nextjs/get-started-with-nextjs

The issue I'm facing is that once authorized on signin or signup I get redirected to the route I have setup in my env.local as planned, but I start getting on infinite loop of GET http://localhost:3000/ 401 (Unauthorized) error.The only way to get out of that loop is to stop the Next server or delete the localstorage files stored by Clerk

I though that I made mistake in the intial setup but everytimes I go through the instructions I'm facing the same issue over and over again.

I have also tried to run the example provided by Clerk on Github clerkinc/clerk-next-app-router-starter and I get the same error. The only manual settings I performed is adding the API key and Secret in the .env.local file

-Followed the get started instructions provided by CLerk -Try multiple browser (Firefox/Chrome) -Run the clerkinc/clerk-next-app-router-starter repository example -Create another Clerk applications 9user pool)

As mentionned above everythig seem to be setup according to the official docs

I was looking forward to leverage an auth product that do most of the heavy lifting. Anyone facing the same issue or would recommend a path to look into as I'm getting out of idea here?

Thanks

Upvotes: 5

Views: 11123

Answers (3)

Hamed MP
Hamed MP

Reputation: 5503

I just had the same issue (and I have intl-middleware as well in my middleware.ts), after lots of debugging, I noticed my console.logs and debug: true is not showing up in the logs, which meant my middleware was completely absolute and was in the wrong place.

I'm using nextjs 15 with the app router and src directory, prev. had it in the root of the project, beside next.config.[ts|js] (~wrong~), moved it inside src directory and problem solved.

Upvotes: 0

Bartosz Stpiczynski
Bartosz Stpiczynski

Reputation: 21

For me it was a nessesity of setting up prod envirenment on Clerk website and adding production PUBLISHABLE_KEY and SECRET_KEY. Maybe connected somehow.

Upvotes: 0

Karelle
Karelle

Reputation: 81

I just had this issue myself and was able to fix it. Add the following key value to authMiddleware.

authMiddleware({ debug: true })

This will tell you what is causing the 401 and infinite loading for your app. For me, it was the reason was "token-not-active-yet", which was due to incorrect time set on my computer.

Upvotes: 8

Related Questions