Authentication solution for NextJS, React Native, and NestJS
Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
I am starting a new SaaS project using NextJS with a separate Nest.js backend, and a React Native mobile app.
I'm having trouble finding a good way to implement authentication. I plan to start with at least Google and Email/Password sign-in methods. I may want to implement Apple and Facebook at some point as well. Ideally, I would like to use some kind of provider like AWS Cognito, Supabase, Clerk, etc for user management.
I was looking at NextAuth, but it doesn't seem like that will work for me since I need users to be able to login to their accounts through the NextJS app as well as the React Native app. Here are a few solutions I've been researching:
1. Using NextAuth for the NextJS app and configuring an external provider (like AWS Cognito, Firebase, Supabase, etc) to manage users, and then connecting to that same provider through React Native. Again, with this approach, I'm not sure how the authentication would work when authenticating to the server. I guess I would still need to pass something back to the server and have it authenticate the user on that side as well. So then at that point is it even worth using NextAuth?
2. Moving all of the authentication to the NestJS API (e.g. having my own routes for login/logout/signup) and then authenticating each request with my external provider. The only reason I don't like this is because even with a provider like Cognito or whatever, I would still need to manage the flow between the client and server myself, rather than just using something like NextAuth which seems to handle a lot of that worry for you. I suppose the flow itself isn't really difficult, it's just passing a token back and forth through HTTPS right? I'm just not sure how to properly handle the token on the client side as I've read local storage isn't secure.
3. Similar to #2, but rather than using an external auth provider I write my own logic using something like passport.js and store the tokens myself in a user database.
I'm having trouble finding a good way to implement authentication. I plan to start with at least Google and Email/Password sign-in methods. I may want to implement Apple and Facebook at some point as well. Ideally, I would like to use some kind of provider like AWS Cognito, Supabase, Clerk, etc for user management.
I was looking at NextAuth, but it doesn't seem like that will work for me since I need users to be able to login to their accounts through the NextJS app as well as the React Native app. Here are a few solutions I've been researching:
1. Using NextAuth for the NextJS app and configuring an external provider (like AWS Cognito, Firebase, Supabase, etc) to manage users, and then connecting to that same provider through React Native. Again, with this approach, I'm not sure how the authentication would work when authenticating to the server. I guess I would still need to pass something back to the server and have it authenticate the user on that side as well. So then at that point is it even worth using NextAuth?
2. Moving all of the authentication to the NestJS API (e.g. having my own routes for login/logout/signup) and then authenticating each request with my external provider. The only reason I don't like this is because even with a provider like Cognito or whatever, I would still need to manage the flow between the client and server myself, rather than just using something like NextAuth which seems to handle a lot of that worry for you. I suppose the flow itself isn't really difficult, it's just passing a token back and forth through HTTPS right? I'm just not sure how to properly handle the token on the client side as I've read local storage isn't secure.
3. Similar to #2, but rather than using an external auth provider I write my own logic using something like passport.js and store the tokens myself in a user database.
24 Replies
Hmm if you need to authenticate multiple app I would favour the separate backend approach even its more work
I don't like much using a Next.js backend as an API for multiple client, it's not really optimized for that
eventhough its possible
With Passport you can still plugin other auth providers
For storing tokens I've crafted an article to clarify how it works for client apps
to sum it up
- localStorage (or sessionStorage or any JS based browser storage) is ok if you make sure that you have securities preventing XSS attacks. Some people even argue that's better than cookies
- HTTP-only cookies are good but then you need to protect against CSRF (people try to force the browser to send the cookie basically)
(not to be confused with cookies available from JS, which are closer to the localStorage)
Note that using cookies is mandatory if you want to secure the page access
and not just data access
for instance say you have a blog with paid content, you need to use cookie based authentication if you want to keep the page static and prevent access from it
Cuvier’s Dwarf CaimanOP
@Eric Burel Thanks for the response Eric!
Does it even make sense to use NextJS here? It seems like I would want to call my external API from the 'use-client' components in my NextJS app with react query or something, and then at that point I feel like I'd be better off just creating a standard React app rather than using a framework like NextJS. Since I'm not taking advantage of their backend functionality.
Does it even make sense to use NextJS here? It seems like I would want to call my external API from the 'use-client' components in my NextJS app with react query or something, and then at that point I feel like I'd be better off just creating a standard React app rather than using a framework like NextJS. Since I'm not taking advantage of their backend functionality.
but you might still want to use the server-render features
if you don't have server-side requirements and you favour client-side data fetching, then yes you might want to give a shot at Vite first
Cuvier’s Dwarf CaimanOP
@Eric Burel Yeah maybe you're right. I love the developer experience with NextJS, especially the nested layouts, and how the whole project is organized with the file based routing and all that. But I'm starting to feel like using it for what I want is overly complicating things with the need for a separate backend, and a mobile app.
The app I am making is basically all behind login, so I think the only SEO benefits I would get from Nest would be on my landing page. If anything maybe I build the public facing pages in Next and keep the app as a SPA built with Vite or something.
I'd love to be conviced that Next is still worth using only for the frontend. Like I said I love the way the framework is structured and the developer experience. I just feel like things will be complicated due to the other points I've mentioned. What do you think?
The app I am making is basically all behind login, so I think the only SEO benefits I would get from Nest would be on my landing page. If anything maybe I build the public facing pages in Next and keep the app as a SPA built with Vite or something.
I'd love to be conviced that Next is still worth using only for the frontend. Like I said I love the way the framework is structured and the developer experience. I just feel like things will be complicated due to the other points I've mentioned. What do you think?
@Cuvier’s Dwarf Caiman <@769111741098622976> Yeah maybe you're right. I love the developer experience with NextJS, especially the nested layouts, and how the whole project is organized with the file based routing and all that. But I'm starting to feel like using it for what I want is overly complicating things with the need for a separate backend, and a mobile app.
The app I am making is basically all behind login, so I think the only SEO benefits I would get from Nest would be on my landing page. If anything maybe I build the public facing pages in Next and keep the app as a SPA built with Vite or something.
I'd love to be conviced that Next is still worth using only for the frontend. Like I said I love the way the framework is structured and the developer experience. I just feel like things will be complicated due to the other points I've mentioned. What do you think?
I mean, server-side rendering and frontend should not really be opposed, it's more a different way of doing frontend
people writhing PHP are still doing frontend and yet rely heavily on server side rendering
Next is is more of an hybrid between these worlds
but sure, if you don't use ssr, you'll probably be better off with a solution that focuses on client-side rendering and data fetching
and indeed you can still bring Next in if needed for visible parts of your app (though with a proper caching setup it's usually ok even with Vite, Next would be more needed if you start having dynamic pages like product pages, blog articles etc. at scale)
Russian Blue
Interesting issue, sorry for jumping in, but I have the same problem. I am using Nextjs as a full stack. It would'nt be a smart thing to have my react native mobile app fetch requests on my Nextjs backend (I would have to create route handlers I assume, exclusively for the app, since rn I use server actions in the web app). Also, what about the authentication system in that case? what are the possible options on react native?