Setting up a new project with Kindling and integrating Express App with React App

Unless there is some magic happening with the headers being sent to the API that i'm not aware of, which is entirely possible 🤔

Nothing that I can see. Just tried to call a protected route and it attemped a 302 to the defined logout

Hi, the protectedRoute middleware will allow you to provide the react generated access token. This is updated functionality, I will get if the docs are up to date, it sounds like this may be missing.

Once the middleware picks up from the bearer token you can use all the normal helpers account the access token

Ok, so I just need to pass the accessToken as a standard

headers["Authorization"] = `Bearer ${accessToken}`

and the express app will pick that up automatically

While i've got you, is there any way to get the access token aside from using a hook?

Yes.

This is the section of the middleware which handles this. |

https://github.com/kinde-oss/kinde-node-express/blob/main/src/helpers/kindeMiddlewareHelpers.ts#L54-L74

I'm trying to get this into a legacy app I've picked up and it's using axios interceptors

Let me check into React SDK for you, I am not sure off the top of my head

I'm pretty sure it doesn't off the top of my head, but thanks for checking

Yea, as I thought, due to the nature of React being a FE only framework it will be more challenging. Is Express your API also?

Unfortunately yes

I've only used Kinde with react and appsync in the past, and that was pretty easy to set up

it looks like i'll need to pass the accessToken into every single API call?

Surely not everyone is doing that

that seems, verbose

🤣 Thats a good thing here.

I would suggest using the express SDK and having that handle the auth, it will store the values in cookies which can then be requested from your react FE

it the Next SDK we have a /setup route which the FE calls which returns the tokens

Do you have any documentation on how that looks?

Let me put something together for you

simple, will need more checks etc.

app.get("/", protectRoute, getUser, async (req, res) => {
  res.json({
    user: req.user,
    token: await client.getToken(req),
  })
});

Interesting! I'll check it out

Hi ,

How did you get on, are you needing any further assistance with this?

Hi Daniel,
Thanks for checking in, I'm just sitting down to look at this now. I've got the initial version working with protectedRoute and getUser, that wasn't so much the issue, it was that sending it as the barer token for an axios based front end is a pain, but I'll just have to do it for now from the looks of things

Could you explain a little more there? Can you share some of the code form you axios intercepter?

Axios interceptors can't utilize react hooks, so I can't use the useKinde hook

Which means I need to pass in the token on every function fro the component

I don't know, it feels like a fairly standard use case for a SPA to have to send a barer token through axios to an API, so i'm a bit surprised there's not guide for this use case

With the approach I mentioned above with the Express handling the auth you wouldn't need to pass the token with each request to the express api.

app.get("/", protectRoute, getUser, async (req, res) => {
  res.json({
    user: req.user,
    token: await client.getToken(req),
  })
});

I understand protectRoute and getUser, i've already got that there and it's working fine

But I have a pre-existing react app and Express API where the devs never built any authentication, so I'm adding in auth now (as well as a bunch of other things), so I was hoping this would be a quick win

Are you using the React SDK to do auth currently or are you using the express auth routes described here: https://docs.kinde.com/developer-tools/sdks/backend/express-sdk/?

I've already set up the react app as that's what i've used in the past

Handling it as part of the express app will involve a bunch of learning and re-writes I don't really have time to do right now tbh

It's great that you have that option, but it's not really an option for me without adding a bunch more work, i'm not building this service from scratch

I'll just build a custom hook or something to manage it on the front end, I'm sure it'll be fine

Great, is that works for you perfect. Our express SDK is quick to get going with if you wanted to migrate in the future this will be a simple migration. 👍