React Native Login with JWT Auth Context

In this video, we'll explore how to add JSON Web Token (JWT) authentication to a React Native app in order to protect users' sensitive data. And how to use Expo's Secure Storage to manage your JWTs.
🔥 Learn React Native FAST: galaxies.dev/reactnative
⚡️ Get the code: galaxies.dev/react-native-log...
#############################
🤷‍♂️ Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️ You can also find me on:
Instagram: / simongrimm_
Twitter: / schlimmson
Facebook: / devdactic
TikTok: / simongrimm_
Or join the Simonics Facebook group:
/ simonics
#############################
00:00 Intro
00:46 Creating an Authentication Context
10:43 Secure your React Native App
15:00 Building the Login
18:10 Making authenticated API Requests
24:15 Outro

[@galaxies_dev]

Join Galaxies.dev today - the Home of the Best React Native content🚀

[@Jopu96]

Hi! Thank you for the video. You need to set autoCapitalize="none" inside the TextInput, so the simulator or real device does not capitalize the first character. And you don't have to type it in your Text editor and copy it :D

[@user-wt4zu3jc1u]

Many thanks dude. You save my time a lot for my first React Native project with this!

[@galaxies_dev]

Awesome, always happy to help React Native devs :)

[@kayongojohnsonbrian3902]

AMazing video and is just on point, thanks a lot for the videos. I am learning a lot of the complex and hard parts from you man. Thanks a lot

[@galaxies_dev]

Super happy to help, always let me know when you got questions!

[@komilolimov2257]

Thank's Simon i really appreciate yoor work

[@olalekanajayi3877]

Had to subscribe, this video saved me tonight. Thank you so much

[@galaxies_dev]

Happy to hear that - would be awesome if you could share it with others 🙌

[@comanmaryan7338]

Yeah , I suppose not enough revenue from ads, so let's add a subscription for the source code , not that I needed it personally , but would be great if you have mentioned that a subscription is necessary in order to get it.

[@messylife4550]

@galaxies_dev awesome tut! Curious what version of react-native and typescript did you run for this proj? I am getting an error from your Login.tsx - line:21 - when clicking login TypeError: onLogin is not a function (it is undefined) same goes for the register block. Would appreciate your guidance brotha!

[@galaxies_dev]

Don't think this issue comes from a TS version but more likely the function not being defined correctly in your component!

[@argonjs]

when creating context define the methods too. like this const AuthContext = createContext({ authState: { token: null, authenticated: null }, onLogin: () => Promise.resolve({}), onLogout: () => {}, }); this will resolve your issue

[@johncmm9759]

This is fantastic content! Thank you so much. I'm not copying your code line for line but can I use this as a reference for an app I'm building?

[@galaxies_dev]

Of course, I'm happy if you use my code :)

[@ivanbatanov6588]

Great video! How would you deal with refresh tokens when the JWT Token expires after some time for example.

[@galaxies_dev]

You could implement a check in useEffect() and automatically try to get a new token if you have a refresh/access token flow

[@ricecodesdev]

Hey Simon, once the user is authenticated, is there any way of accessing their data in the app? For example, I need to make a GET request and pass in the user's ID to get their data on the home page. Right now I can't make this call, because I have no way of passing any information (such as an id or a token) into the GET request on the homepage. Cheers

[@ricecodesdev]

Don't worry, figured it out. I had to import "useAuth" into my home page, store it in a variable (called "auth" in this case), and access the token via "auth.authState?.token".

[@nguyen-van-quang]

I follow you a long time ago, you're finally back to react-native? Maybe flutter in next time : ), flutter is better for mobile cross-platform now! But react-native is still the best choice for a web js developer.

[@galaxies_dev]

I'm into all of that, and yes there will be more RN and also Flutter over the next time :)

[@hagosoftware]

Hi there, good tut! You use "useAuth()" on Login screen. Where does it come from? I reviewed the AuthContext, and it doesn't come from that.

[@galaxies_dev]

It's in the AuthContext almost at the top, an easy way to access the provider from the context!

[@bilelrahmouni01]

thank you

[@jduffy6929]

I have something similar but what I’m trying to work out is how to handle when that token expires? Do I need to implement refresh tokens or how do I sign the user out once it expires?

[@galaxies_dev]

Yeah you would have to setup a refresh/access token flow and when you get back a certain status from your backend, automatically make a call to get a new token!

[@christophersalame4219]

Then how do we store the refreshtoken?@@galaxies_dev

[@DrHalloumiStix]

I think your live api needed to be changed back to https rather than http at the end of the video. That may be why login wasn't working?

[@luisdagraca2232]

Hello. I want to create an Expo app with users. Which form of authentication (JWT, Clerk, or Firebase) seems best to use when I also want to include MySQL in my app? In different tabs of the app, I want to display information from the user from the database.

[@zajjajbinsana]

I would suggest clerk , from my knowledge. I know I am a lil too late at reply

[@chaitanyasondur8483]

I must appreciate the content you are uploading! It really helped me to understand the concept of Auth Context in React Native. I need your help in this issue that I am facing: From 11:19, I have wrapped my Login component inside the AuthProvider, so Login can access the context. But from the Login page, I have a button to "create an account" which navigates to a Register component using Link from expo-router. I am unable to access the onRegister method and the state from the Register component and the error says "onRegister is not a function (it is undefined)". Additionally, when I wrap my Register component inside Auth Provider it works perfectly fine. But when I navigate to Login component it again says "onLogin is not a function (it is undefined)". I am not using the stack layout for Login and Register components. My initial screen is the Login screen and from there I have created Stack navigation for navigating to other pages. I assume that the authState will not be accessible from other pages too in my case. I have used all the imports and the useAuth() correctly as mentioned in this video.

[@GeorgiTraykov-gw5jx]

Should we get signed out automatically when the expiration of the jwt is due, or should we stay signed in?

[@galaxies_dev]

Depends on your system requirements. I'd kick out the user when the next request fails due do an expired token, not automatically when the time is up!

[@GeorgiTraykov-gw5jx]

@@galaxies_dev do you think setting up a listener would be good so when the token expires the user gets kicked out?

[@andssuo517]

hello, i am doing my project with expo router, not with stacknavigator, could i do the same in my main layout where is my login and my (tabs) which are already the home, etc?

[@galaxies_dev]

It works a bit different, you can check out the API and Auth course on Galaxies.dev or this video which comes close to it: kzbin.info/www/bejne/sJmZhJZnm9F-aMk

[@belkocik]

Would you make a video how to implement this with global state management system a library called: JOTAI instead of React Context?

[@galaxies_dev]

Yeah looking into Zustand / Jotai is on my list!

[@belkocik]

​@@galaxies_dev Nice. That video would help me to figure it out how to do it with Zustand :D

[@WhiteRickRoss]

Waiting for Expo router and JWT videoo

[@GladsonReis]

Perfect !!! Please, where do I find the github of this project ?

[@galaxies_dev]

Tutorial is on Galaxies: galaxies.dev/react-native-login-jwt-auth

[@miloniemaz1485]

What if I am using expo router ? And _layout file instead of App file that you are using ? (probably because the video is old)

[@galaxies_dev]

It works a bit different, but we got a full course on that on Galaxies as well: galaxies.dev/course/react-native-tanstack

[@ubokabasi9782]

Can I still follow this video when using a bare react native project and not expo

[@galaxies_dev]

Yeah this is more about TS and RN than about Expo!

[@ubokabasi9782]

@@galaxies_dev what alternative do you suggest I use to expo-secure-store,if I am using a bare react native project not with expo

[@user-dc3vv1qr6k]

Could you please make a video on Expo Router with JWT Auth Context?

[@galaxies_dev]

I actually have a full course on it here: galaxies.dev/course/react-native-tanstack

[@reacaosistemas5746]

If using expo-router v2 ? Great job!

[@miloniemaz1485]

hey man, did you manage to do it with expo ?

[@reacaosistemas5746]

@@miloniemaz1485 Consegui. Foi dificil mas deu certo

[@miloniemaz1485]

@@reacaosistemas5746 I’m currently encoutering the same issue, could you maybe help me ?

[@miloniemaz1485]

@@reacaosistemas5746 if you don’t want to help me, could you at least give some clues ? 🙏🙏

[@sparsetech1671]

Hi, I start working see your videos expo v2 project , But may be i am wrong , You don't proper guidline about expo v2 jwt authentication . I am upset.

[@galaxies_dev]

We do have a course on Galaxies.dev about Expo Router and Auth as well :)

[@RamChickPig]

I'm getting authState doesn't exist in Layout. Any clue why. Thans.

[@galaxies_dev]

Did you add the context correctly? Does authState exist in the provider?

[@TheLeonKwameShow]

How are persisting login on app refresh using context api?

[@galaxies_dev]

You can store the token in AsyncStorage and load/check it on app start again!

[@Rocketos]

Can i use this same login using expo router v2?

[@galaxies_dev]

It works a bit different with file-based routing, gotta do a video on that

[@imdevbutok]

Não funcionou o login porque faltou um 's' em http. 🤡

[@KhiemTranVietnamese]

Can I have your codesnippets for the console.log() at 6:39

[@argonjs]

that turbo console log extention for vscode

[@user-om9ig2cr8k]

PKCE?

[@thomasfreedy]

Hi, is there a github for this?

[@galaxies_dev]

It's available for Galaxies members here: galaxies.dev/react-native-login-jwt-auth

[@FluxxSet]

hey , i think you forgot to mention link for source code ..

[@galaxies_dev]

It's linked below in the tutorial!

[@balbalnyesh7684]

hi i use your code and i make some different, because i not use expo. i use a package @react-native-async-storage/async-storage and when check the token i got null and in navigation not direct to login screen

[@chiragkushwaha76]

the api works, it didn't worked bcos of "http" make it "https"

[@galaxies_dev]

Yeah I messed that up, sorry!

[@algorithmprime]

@@galaxies_dev You did not add the api on the link below

[@oztv_]

@@algorithmprime yea

[@quemasps]

The error occurred because the "authentication" header was not deleted, in logout() method. delete axios.defaults.headers.common['Authorization']