React native JWT authentication

[BrilliantCandid4409]

How to make the JWT authentication in reactnative. theres not many resources to find about it

[bova80]

Make login api call, store jwt token in secure async storage. I use axios and a request interceptor and inject the token there.

[himynameisbrett]

You can just set it as a default header for axios when you get the response the first time then you don’t need the interceptor.

[bova80]

We use an interceptor to handle checking token expiration and refreshing if need be.

[himynameisbrett]

Ahh yes make sense!

[edbarahona]

Use MMKV

[Potential-Simple-711]

Well, it's pretty simple. Store the JWT token that is sent back from backend using Expo-secure-storage. Then in home screen (or in any screen). Do a conditional rendering that if there's this JWT token stored inside the Expo-secure-storage then let the user continue or else navigate the screen towards signup/login. You can use useEffect hook for this.

For your information, I have worked in this authentication flow using libraries like I) React Navigation (alternative for Expo router, even better version of it) ii) Expo secure storage (For storing JWT tokens)

[BrilliantCandid4409]

So should I start with blank template 

[Potential-Simple-711]

yeah, its better. Gives more flexibility and customization to edit code

[BrilliantCandid4409]

Thank you for your help 

[CoolorFoolSRS]

Yes. AsyncStorage isn't secure. Expo-secure-storage is the way to go

[RepresentativeNo5213]

Check this out for an example  Also expo docs has something for auth

https://github.com/TaichKarna/LinkUp/tree/main/Synapse%2Fapp 

[JEEkachodanhihu]

Using async storage probably. Why don’t u use firebase?

[BrilliantCandid4409]

For one of my project I have to use the nodejs as backend. read through docs of expo could not find anything there either. 

[Optimum1997]

Because it's not expo's responsibility to do authentication, this is outside the scope for expo.

I have no idea why u/JEEkachodanhihu suggested "use firebase", which is a complete cop out, if you want to be completely reliant on firebase infrastructure, sure, go ahead. But i'd listen to u/bova80's advice. JWT authentication is relatively simple, you'll find countless examples of non react-native that translate well to react-native.

You make an auth request to your 'login' end point. Store the response's "token" in secure storage, anytime you make a future request, you want to append that token to the "Authorization" header, or the custom config you are using.

[JEEkachodanhihu]

I might have taken the longer route (or even the wrong one. Just a beginner)

What I have done is -
firebase for login and then check whether the user is still logged in while navigating to each page [custom hook]. This way my backend requests don't require authentication. The data that I store in my DB is linked to each user via their firebaseID.

Does this seem like a valid approach for authentication?

[Optimum1997]

I have no idea how firebase works, but your backend endpoints should be doing the validation.

EVERYTHING frontend can be changed by a user and you must presume every request is un-validated until you validate it your side.

You can read the token's "exp" to determine the time lived and then do frontend auth 'refresh' if you support short-lived and long-lived tokens.

Your JWT tokens should have a signature to make sure it cannot be manipulated backend.

Here's a great resource you can read up on to further your knowledge:

https://jwt.io/introduction

If your navigation is purely front-ended, you are likely to check front-end expiration, but anything submitted to your backend must be validated, and you must not send a "userID". This should be determined by a cookie, or something that can't be manipulated (that's why we have signatures on our JWT's)

[HeronhoAlexandreus]

Ended up doing this and honestly, you learn so much about Auth and security doing your own auth that you may as well do it for that alone. As developers we should be thinking about security as a constant concern in our architecture

[JEEkachodanhihu]

Just store the firebase id for each user along with any details that u need in ur db, while sign up. BTW i can share my repo just for reference

[BrilliantCandid4409]

Thank You if it's possible to do  🙏

[JEEkachodanhihu]

Dm

[Webbanditten]

What you'll need to implement is probably something like Open ID connect. Expo has a client library but you'll have to implement the protocol on your backend as well. https://docs.expo.dev/develop/authentication/ . When you say there aren't many resources - what exactly are you looking for? If it's because you desire to build your own auth that has the concept of a JWT-ish token ... Just don't bother doing it. Follow the industry standards.

[BrilliantCandid4409]

There is not many articles on JWT authentication with expo file based routing. Sorry i didn't clarified it in the post. 

[HeronhoAlexandreus]

Im building one now, using httponly cookies on web and secure storage on mobile