OAuth approach with NextJS app router and BFF pattern
Hey folks, I'm looking for some guidance on the best way to approach oauth in the way I like (and generally have) to build apps.
My general stack these days, is to use NextJS with RSC for everything frontend, i.e. fetching data on the server and heavily using Suspense etc. when building UI, but using some other tool for the backend. For personal projects I'd use Laravel, at work there is Java Springboot - I'm currently looking at a project using NestJS - point is, the backend and thus all the "brains" of my apps is outside of Next - so heavily using the backend-for-a-frontend pattern.
Now, mostly the way I've always handled authentication with this is just standard email+password logins. So;
- I build a login form in Next
- username and password is sent up to a server action
- server action hits real API which handles auth and returns a JWT/some other access token
- this is then stored in a cookie with something like next-auth
- the next server then has access to this token, and can used auth API endpoints because the token is available on the server
All fairly standard and simple.
But I'm now looking at adding OAuth, so as well as username+password authentication (which will still be owned by the non-next backend), we want to add in like "Login with Google", or Github, or whatever other OAuth provider it is.
Now this is where I get lost - I'm not sure where the OAuth flow should sit. It seems like it should be owned by the backend, as that's what owns the original auth, but how do I then get that session back to the frontend and available in the RSC environment?
I'm struggling to find much on this - a lot of blog posts or whatever often just do it where everything is "use client" and stored in session - not what I want at all, or are building full-stack in Next, again - not what I want.
OAuth has always perplexed me, and I'm just looking for some guidance on what the right approach for this.
Any input would be seriously appreciated! Thanks 🙂
1 Reply
I appreciate this is a massive wall of text, sorry!!!