Invalid CSRF token when authenticating via third-party app

hnipps

I'm trying to use NodeBB as a headless forum (i.e. just a REST API with a separate front end) but keep getting an "invalid csrf token" error when I try to authenticate.

I've confirmed I can authenticate via the NodeBB UI on the same instance.

I've also tried getting the NodeBB config and using the csrf token from there in my requests but it still does not work.

My frontend is a NextJS app that rewrites all /api/:path* requests to http://<MY-NODE-BB-INSTANCE>/api/:path*. It also rewrites the auth paths.

I can see the requests reach NodeBB but always get "invalid csrf token".

I've verified that I can successfully call GET endpoints from my app, e.g. I can get the user list from /api/users.

PitaJ

So you're saying you tried setting the x-csrf-token header like this and that didn't help?

When you say your "NextJS app ... rewrites", that's a client-side operation? Everything you're talking about happens in the browser, right?

Have you tried just doing the same requests with fetch instead?

hnipps

Thanks for your response @PitaJ !

Yes I'm setting the csrf token like that

The NextJS rewrite is server-side. The NextJS server rewrites some paths (e.g. myapp.com/api/users) to point to by NodeBB instance (e.g. mynodebb.com/api/users), essentially it's a proxy so I don't have to mess with CORS.

I'm already using fetch

Having said all this I figured out the issue. I needed to set the canonical url in NodeBB config to be my frontend URL, not the URL at which NodeBB is served.

So I fixed the csrf token issue and now I have another issue 🫠 ...

I can login but the endpoint always returns a 404 error.

My plugin adds a new auth endpoint (/auth/lit-protocol) which adds a new passport login strategy but I always get a 404 even though I get logged in to NodeBB.

PitaJ

@hnipps what's returning the 404, NextJS or NodeBB? What is the exact error you're getting?

Is your site under a subfolder, like example.org/forum? You'll need to send requests under that same path. So instead of /api/whatever, it would need to be /forum/api/whatever

julian

@hnipps said in Invalid CSRF token when authenticating via third-party app:

My plugin adds a new auth endpoint (/auth/lit-protocol) which adds a new passport login strategy but I always get a 404 even though I get logged in to NodeBB.

What are you calling to log in the user, req.login? Might be easier to call .doLogin(req, uid); (which is exported by src/controllers/authentication.js)

hnipps

@PitaJ @julian
Apologies for not replying and thank you for the suggestions!

I figured out the issue with csrf. I had to set the config url to be that of my client app instead of the nodebb instance.

Using this I'm able to request the csrf token from the config endpoint and use that in subsequent requests.

solmak

@hnipps said in Invalid CSRF token when authenticating via third-party app:

I'm trying to use NodeBB as a headless forum (i.e. just a REST API with a separate front end) but keep getting an "invalid csrf token" error when I try to authenticate.

I've confirmed I can authenticate via the NodeBB UI on the same instance.

I've also tried getting the NodeBB config and using the csrf token from there in my requests but it still does not work.

My frontend is a NextJS app that rewrites all /api/:path* requests to http://<MY-NODE-BB-INSTANCE>/api/:path*. It also rewrites the auth paths.

I can see the requests reach NodeBB but always get "invalid csrf token".

I've verified that I can successfully call GET endpoints from my app, e.g. I can get the user list from /api/users.

This is a 2 yr old thread, but @hnipps have you gone any further with the React/NextJS frontend with a headless nodebb?
If you have made any progress I would love to contribute on the frontend build. It is daunting to start as a new project but if any foundations were laid I would love to jump in and build upon it.