Discussion about the right approach to handle authentication with an external API

I am loving TanStart so far, it’s simplicity when implementing features is top notch.

I’ve had history with TanStack since 2020 and it never fails to disappoint.

One of reasons I moved from NextJs is because of TanStack’s approach to CSR being the main focus.

Now back to the idea of this post.

Back in NextJs, the way I handled authentication was scary and I believe I left a lot of use cases without taking care of.

MetaFrameworks in general push users to use 3rd party providers like Clerk/supabase and others, but there are cases where applications have an external api that already handles that part (separate backend team) meaning that in TanStart we should only handle the part (both server and client side) to take the access_token/save it in vinxi’s session/retrieve it before calling that external server and put it in Authorization header

bearer access_token

bearer access_token

bearer access_token

bearer access_token.

The flow should look like this and I would love your feedback if I’m doing something wrong:

colossal-harlequinOP•11/12/24, 9:26 AM

User clicks on login with social media or puts credentials, whichever he chooses, there will be a server function that does the steps and calls that external server which returns a response of this type: {access_token: string, refresh_token: string, userInfo: User}
Using Vinxi’s session, we save those informations.
Now we have 2 sides (client/server) that we need to take care in order to retrieve the access_token and add it to the Authorization header.
Places that we query or mutate the data are: loaders (first time in server and other navigations in client), server functions, api handlers, full client side.
We should also take care of refresh token

I would love to have one solutions that handles all those cases 4/5.

One question I have is when doing full client side calls that required the access_token, where should we fetch it from, do we save it in localstorage and retrieve from there or call a server function to retrieve it or use Tanstart as BFF meaning that for every fetch/mutation we use server functions.

If I manage to make a working/simple api of this, I would be extremely happy because It was a pain in NextJS

Discussion about the right approach to handle authentication with an external API

Similar Threads

Similar Threads

Similar Threads