Master React Native Authentication with Expo Router & Clerk

[@galaxies_dev]

Get started with Clerk for free: clerk.com/? Learn React Native FAST by becoming a member of Galaxies.dev today [FREE] galaxies.dev/reactnative

[@matheusbrauna102]

I was totally stuck trying to figure out how to use Clerk with Expo router, and bam, this video pops up right when I needed it!

[@galaxies_dev]

Glad I could help Matheus!

[@james-perkins]

Great video Simon! Thanks for covering Clerk

[@galaxies_dev]

It was awesome James - definitely not the last time I used it 🔥

[@jessechounard]

At 28:30, signIn and setActive might be undefined because you aren't checking for isLoaded on this screen.

[@adriangutierrezalonso7828]

I was integrating Expo with Clerk and Convex and this video was a lifesaver. Thanks, Simon for this awesome tutorial

[@galaxies_dev]

Glad I could help Adrian 💪

[@shadowysuper-coder6120]

Thank you so much for the tutorial! Overall, it’s very helpful, but at times it’s a bit challenging to follow, especially when you paste dozens of lines of code without much explanation about where they come from, like you did at 10:19. We don’t know where this layout comes from, and I can’t seem to find it in the documentation. A bit more context would really help with understanding the steps better.

[@stanislavschaefer3233]

Can you make a video on migrating from React Router to Expo Router? That's something the Expo documentation is missing, which will be helpful to many beginners.

[@galaxies_dev]

Great suggestion Stanislav!

[@stanislavschaefer3233]

@@galaxies_dev you have very interesting content on your channel.

[@olawumisegun5898]

Thanks for this tutorial, can you please do an over the air update for react native expo app?

[@galaxies_dev]

Yeah that's also on my list!

[@raymondmichael4987]

Will eye peeled for this

[@LuizPauloCamargo]

Hi Simon, why are you using ActivityIndicator in index.tsx even using Spinner from react-native-loading-spinner-overlay package? I try to remove this index.tsx but the Expo doesn't like so much and show "Unmatched Route" error. Is This index.tsx mandatory? tks

[@nicolasaguilar2202]

Simon, weird error here: ERROR Error: Not a valid base64 encoded string length This error is located at: in ClerkProvider (created by RootLayoutNav) I followed the steps and worked before but now is not running, any recommendation? thanks man!

[@Raghunadh9]

JUST UPDDATE YOUR CLERK, MATE npm i @expo/expo-clerk@latest

[@matkomilic8382]

The fact that expo router told u /home doesn't exist, I wonder how? Because I have many projects with expo router using typescript and I don't get any warnings?

[@maslovskyy]

you're producing a great tutorials, really Thanks, for your work

[@galaxies_dev]

Glad you like them - would be awesome if you could share them on something like Twitter!

[@maslovskyy]

Done!)

[@epicgameryt4052]

Shouldn't you add the segments constant as a dependency in the useEffect? Now we will just check on the first page visit if there are any segments, but if you console.log this, this segments array will have a length equal to 0.

[@galaxies_dev]

Yeah I think you are right, good catch!

[@matheusesramos]

What would the structure of folders and routes look like if we used styled-components to style the screens using an external style file? It would be something like: app/(public)/login/index.tsx + styles.tsx?

[@shobinsebastian7745]

I have two user roles in my application one is called 'buyer' and the other one is called 'seller' if the user is registered with the role 'buyer' i need to hide few pages and bottom tab navigators from the user like "Create/Post product page" etc.. and if the user is registered with the role 'seller' then i need to hide some pages and bottom tab navigators from them too..and i have the settings page as a common page for both users but i don't know how to hide these pages from the user's and make the settings page only the common page...how to do that? I am using react native expo

[@galaxies_dev]

That's a very good question - I'll see if I can cover this in a tutorial!

[@vilioralex2701]

Thank you for your content SImon, i was looking for a similar video. I have integrated auth via my backend and implemented this in similar way. The only problem i have is that wherever in my app i use either the router.back() or navigation.goBack() it redirects me to the route i replaced in my useEffect. Have you had the same issue?

[@Del4k1]

make more cursors about angular

[@nikolaus-lukasthomas6288]

Hi Simon, thanks for the video. I am planning to use something similar, but I will need a backend (let's say nodejs/express). How could I check in the backend if the user is authenticated? Thanks in advance!

[@YevhenChaban]

Hello, if you need to check it on the backend, then you have two different approaches: 1) use nodejs/express and use Clerk sdk there to check session token 2) use backend, which can't run Clerk sdk, then just sent you session token(await Clerk.session.getToken()) to the backend, and verify it there ( you cand find how to verify it, if you will type in the google "Manual jwt verification Clerk" Both of the approaches are documented in the CLerk documentation : )

[@kh0ng0rzu1ALTANGEREL]

hey, i'm new to this and i want to ask something it is somehow connected to base right or clerk do this on own can i still do this like this even if i need to merge my backend and frontend

[@pedrofurtado8444]

I have a base64 error when authenticating the clerk, my expo is on SDK51 version

[@Inferno-Ripper]

please make a tutorial on how to add social(google) login to this

[@galaxies_dev]

Alright, added it to my list!

[@Inferno-Ripper]

@@galaxies_dev thanks, btw when i tried this method it worked with only email and password fields, but when i tried adding additional fields like username, fullname etc the auth was not working. i have now switched to supabase

[@jjrkkj]

heyy, did you get it? i am searching a lot for tutorials so i can authenticate google with clerk using custom flow, i need heeelp

[@JokeBookGames]

You know, i want to love expo-router, the authentication part is just not working for me like a user expects. Lets say ur authenticated and u open app, there will be a flicker bcs of navigate from default stack to authenticated stack i got around this by increasing the splashscreen, but after that i faced many other issues such as a delay between paginate and many more. I way more prefer the unmounting of the screens like we do in react-navigation.

[@AnoNymous-el6mr]

Hello @Simon, very nice tutorial I followed all the steps, however regarding the last step which consist about updating the user info, I get this error : Message: Status:422 Serialized errors: {"code":"form_param_unknown","message":"is unknown","longMessage":"first_name is not a valid parameter for this request.","meta":{"paramName":"first_name"}},{"code":"form_param_unknown","message":"is unknown","longMessage":"last_name is not a valid parameter for this request.","meta":{"paramName":"last_name"}} Can you help understand why, and let me know if it's due to a clerk's update or anything Thanks in advance

[@galaxies_dev]

You have to enable updating that field in the Clerk settings for users!

[@derekjohnson7768]

When I try and use a tab navigator in my (auth) layout, it's giving me this error: The action 'REPLACE' with payload {"name":"home"} was not handled by any navigator. What do I do?

[@mphatsomlenga8948]

use useNavigation from expo-router and not useRouter

[@alexleung842]

I'm trying to get Next.js + Capacitor + Clerk working and having issues. Basically I need App Links to work right? Not easy for local development.

[@galaxies_dev]

Haven't found the best way for Next + Capacitor yet tbh :/

[@paveljadevic7351]

HELP! I've pretty much coppied git code to my project and I have problem with registration. When I add my email and password it redirects me to verify page as it should. But when i fill the verification code from email it spins loading for second and thats it. It does'nt register me or sends me to home page. There is litteraly same code except Im using .js instead of .tsx. Did anybody had same problem? plus there is waring: "The `redirect` prop on is deprecated and will be removed. Please use `router.redirect` instead at Screen" but I dont thing it has to do something with problem above.

[@dylanmengzhou]

same problem over here, did you figure out?

[@rahmatsulistio]

its cool, but how to handle authentication using jwt that send from backend?

[@galaxies_dev]

Why would you add Clerk if you already have your own JWT auth?

[@rahmatsulistio]

I mean how to handle authentication using jwt in Expo and expo router v2 without clerk? I'm still confused looking at the documentation, how to save the token and validate when the user reopens the application

[@balabala9735]

how to use expo clerk in production?

[@amnashahid9464]

can this be applied expo less the sdk 49 ?

[@teamarceus7077]

Can i use clerk in react-native-cli? anyone?

[@puritymwanzi1889]

Is anyone getting alert is invalid

[@MrAvelino2010]

Make PWA with Expo and Expo Router

[@galaxies_dev]

Yeah that would be fun indeed!