Тёмный

Expo Auth Session - Login with Google in React Native Apps includes Refreshing Tokens and Logout 

MissCoding
Подписаться 8 тыс.
Просмотров 22 тыс.
50% 1

Hi everyone!
Today I am going to show you how to authenticate with Google in your expo Android and iOS applications to receive an access token which you can then use to authenticate yourself in further API requests. I will also show you how to refresh an expired access token and revoke an access token to log a user out.
I just want to note that I actually forgot to record the api request to get user data but the logic is as follows, make an api request to an endpoint the user should have access to and supply an Authorization header which contains the access token received when the user authenticated.
I also want to say the part where I perform the refresh of the access token onwards was written as I went so is a bit messy, but achieves the desired result. I thought I would share it purely because it shows me troubleshooting a bit although I have cut out longer pauses but if it's not your style that's ok and you can go directly to my source code for that part without the journey 😊
If you would like to see my expo-auth-session google example, the source code is available on my GitHub:
github.com/che...
For the expo-auth-session documentation you can see the expo documentation:
docs.expo.dev/...
For a google authentication guide on setting up client ids:
docs.expo.dev/...
If you're interested in the issue I mention that was previously causing authentication to fail on Android standalone apps, check out my prior video:
Expo Auth Session for Google Authentication on React Native Apps
• Expo Auth Session for ...
You’ve clearly come here to learn and a free audible trial allows you to increase your learning potential in situations where you may be hands free like at the gym or on your commute. It allows you to spend more time on theory when you aren’t able to watch a screen, so that you can maximise your screen time to pick up technical skills. Try it for free today:
amzn.to/3ECMsom
// ABOUT ME
My name is Chelsea and I started studying software engineering in 2010. I have been working commercially full time since 2014 and have been in various positions from graduate developer to tech lead to solution architect.
I'm a full stack developer with a lot of experience in C# and Javascript but my passion is for mobile development; specifically native iOS development and cross platform using React Native.
I always have many things on the go and am always trying out a new side hustle and failing at it; perhaps you can learn from my mistakes!
Please like and subscribe if you enjoyed this video and want to see more like it!
Have any suggestions on topics you would like to learn more about? Please suggest them in the comments... I would love to help you out while doing a bit of learning myself!
// PRODUCTS USED
I use the following products in the creation of my videos:
Boya MM1 Microphone - amzn.to/3m6kif7
A reasonable quality and reasonably sturdy but cost effective microphone that can be used by both DSLR cameras, mobile phones and laptops
Canon 18-55mm Lens - amzn.to/3IwscFR
A kit lens but a decent quality lens for beginners getting used to a DSLR
Canon EOS Rebel T7 with 18-55mm Lens - amzn.to/3XZauAL
This is the kit I started with it includes the lens linked above and is a great starter camera.
I love Apple devices... These are the ones I use for my channel content creation:
Apple iPhone 13 - amzn.to/3KAUba4
A good all round phone, good for Apple development and recording videos with enough high quality features but at a cheaper price point than the pro versions.
Apple MacBook Pro - amzn.to/3KxrE5q
A nice portable computer for working from anywhere and perfect for iOS development
Apple iPad Air - amzn.to/3xU2k21
Really easy to use for graphic design if required for logos as part of my app development or editing the videos on the go.
Apple Pencil (2nd Generation) - amzn.to/3EBSwNS
For logo and icon design in Affinity Designer app for iPad
Logitech Folio Keyboard Touch - amzn.to/3XUYBM1
Adds keyboard and touchpad to iPad Air, making it easier to use for writing code/eBooks etc. on the go!
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
//CONTACT:
Please contact me at: hello@tripwiretech.com
//CRAVING MORE:
You can find links to all my different sites and social media over on Linktree: linktr.ee/miss...

Опубликовано:

 

12 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 65   
@MissCoding
@MissCoding 9 месяцев назад
Latest video here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-T-zTZn_xRBM.htmlsi=CpRIjmLOCtx_au6n
@shiroyasha9
@shiroyasha9 Год назад
Thanks, this was really helpful! Also, this is why we use typescript folks- the amount of errors encountered during the later half of the video are almost eliminated with proper typing!
@MinChanSike
@MinChanSike Год назад
Thanks for detail tutorial! It is work expo: 47.0.8 and expo-auth-session: 3.7.2, but unfortunately it is not working in expo: 3.8.0 and expo-auth-session: 4.0.3, Expo has update their package and mostly got some issue with new version (31March2023). Hope to see updated tutorial with expo-auth-session: 4.0.3 soon from your channel.
@Engazan
@Engazan Год назад
doesnt work with expo 48, can be fixed with "useProxy: false," option but you get error "Access blocked"
@kingloufassa
@kingloufassa Год назад
Hi MissCoding, so is the proxy just for development?
@SEVENTEEN17
@SEVENTEEN17 Год назад
Nice tutorial! But I have a question: How can I add this to Firebase Cloud Store?? Could you make a tutorial about it??
@ZohaibIslam-m4k
@ZohaibIslam-m4k 19 дней назад
I am still getting the same error on click of sign in with google access blocked :this app request is invalid
@mtayyab3676
@mtayyab3676 5 дней назад
Did you find any way to solve it ? Please let me know i am also stuck
@gaspargonzalez8294
@gaspargonzalez8294 Год назад
Hi!! can you help me! when i clicked continue yo sign in, screen show me : ValidateError: "client_id" is not allowed. "response_type" is not allowed. "state" is not allowed. "scope" is not allowed. CAN YOU HELP ME PLEASE
@anesumugomba524
@anesumugomba524 Год назад
if you find a solution for this, please ping me. this is driving me crazy
@michaeldecroce-movson2709
@michaeldecroce-movson2709 Год назад
This is fantastic, thank you so much!
@joneikholm
@joneikholm 11 месяцев назад
Thank you very much !!
@joezersmaniotto3103
@joezersmaniotto3103 10 месяцев назад
When using promptAsync {showInRecents: true} for Chrome custom tabs, the window is not closed on redirection. If you use { createTask: false }, the same thing happens and the chrome window overlaps the APP, having to click on the X in the window to close it. something that is not expected, but automatic closing. Have you ever had this problem?
@edge0601
@edge0601 6 месяцев назад
Thank you !
@joeycopperson
@joeycopperson Год назад
where do we securely store these OAuthClientIds for production apps? Isn't data in the app code completely exposed once app is published?
@programmingeveryday2
@programmingeveryday2 Год назад
put it in a .env file
@minhnguyenhainhat234
@minhnguyenhainhat234 10 месяцев назад
if i just have the android client id and run build development on android, is it possible
@florentserraie
@florentserraie Год назад
Thank you, works well for development, however once built on APK or on google play it returns {"type": "dismiss"} and can't go further... did you come across the same issue?
@khardmag
@khardmag Год назад
I ran the app on the Android emulator, but after logging in with Google, it didn't redirect back to the app, which prevented me from accessing the data. could you please help me with this, Thanks.
@TheMitchingHour
@TheMitchingHour Год назад
Is there a way to have two different schemes? Stupidly, my app's bundle id for iOS differs to my package id for Android. 🤦‍♂
@developerpaul46
@developerpaul46 Год назад
Is the response have refreshToken? I'm figuring it out because I need to setSession in supabase that requires accessToken and refreshToken.
@Cappell7
@Cappell7 Год назад
Is it possible to once you have the Google user credentials to then add it into the firebase using firebase sdk - I haven’t been able to and would be really great to know if it’s possible. Thanks !!
@yhaouatis
@yhaouatis Год назад
Very helpful video, thank you for the effort. Can I test an identity provider such as google or azure service in Expo Go? Could you please do a video for Azure AD B2C instead of Google?
@matheusboldrini
@matheusboldrini Год назад
Hello! when testing the code directly in the expo with the android virtual machine, the code works normally, but when generating a project build, the code returns "dismiss", as if I had canceled it, and the google login screen itself redirects me back to the app, do you know how to solve this?
@hyejinahn2898
@hyejinahn2898 Год назад
Thanks a lot for the video. it was really helpful : ) I'd like to see facebook if you get a chance
@Zyaxl
@Zyaxl Год назад
Hi, one cuestion, i installed expo-auth-session with expo 46 but not working, can you help me?
@popoispoop6760
@popoispoop6760 Год назад
Can someone help me? I want to login and get user info in 1 button click but my userInfo state gets filled with UNAUTHORIZED value before it gets the actual account info so I'm having trouble with getting the data into a database etc.
@n0th1n93
@n0th1n93 Год назад
hi guys! how i can get id token, i dont know, always i get "undefined"
@davidlintin
@davidlintin Год назад
Thanks for this video. Id be interested in Apple Auth
@MissCoding
@MissCoding Год назад
Hi 👋 hope this helps: How to Add Apple Authentication to Your Expo React Native App and Store Token using Secure Store ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fwGCCg0PQKo.html
@velhoonp
@velhoonp Год назад
do it with expo and okta pleeeeaaaasseeeeee
@MarkGMiguel
@MarkGMiguel Год назад
It works also in Android Emulator?
@denyskuz4927
@denyskuz4927 Год назад
Hey, Awesome video. It doesn't work for expo: ~48.0.6. I get this message: "ValidationError: “client_id” is not allowed. “response_type” is not allowed. “state” is not allowed. “scope” is not allowed". Could you help me it with it ?
@bobs8079
@bobs8079 Год назад
getting the same error, It's been driving me crazy aswell with no fix, we should keep each other updated
@denyskuz4927
@denyskuz4927 Год назад
​@@bobs8079 how did you fix it?:)
@bobs8079
@bobs8079 Год назад
@@denyskuz4927 I havn't fixed it yet :(
@denyskuz4927
@denyskuz4927 Год назад
@@bobs8079 please ping me if you find the solution 🙏
@Jacobtr
@Jacobtr Год назад
same here
@bilelrahmouni01
@bilelrahmouni01 Год назад
thank you
@gouravnainwaya5669
@gouravnainwaya5669 Год назад
Make device motion tutorial
@MuhammadhammadSohail
@MuhammadhammadSohail Год назад
wonderfull, but it wont work in development.
@liuyan8066
@liuyan8066 Год назад
The error, I got is "[Unhandled promise rejection: Invariant Violation: `RefreshTokenRequest` requires a valid `refreshToken`.]" I cannot refresh token. And my Android simulator cannot go to signin or logout screen, always stay in refresh Token screen.
@minamichelle514
@minamichelle514 Год назад
same for me ... have you got any solution for this ?!
@pbev34isbum
@pbev34isbum Год назад
@MissCoding Same for me
@radicalglitch9218
@radicalglitch9218 Год назад
Really helpful. Thanks!
@alexandergarzo9415
@alexandergarzo9415 Год назад
Tnak you
@shervinmolka3137
@shervinmolka3137 Год назад
I was perfect .
@hammadnaeem7691
@hammadnaeem7691 Год назад
I tried what you mentioned in video but when I try to run via .apk file I get this error msg "Error: Cannot use the AuthSession proxy because the project full name is not defined. Please ensure you have the latest version of expo-constants installed and rebuild your native app. You can verify that originalFullName is defined by running `expo config --type public` and inspecting the output." In my case useProxy: true
@hammadnaeem7691
@hammadnaeem7691 Год назад
And if I put the name, I get this "The request is missing a required parameter, includes an unsupported parameter value (other than grant type), repeats a parameter, includes multiple credentials, utilizes more than one mechanism for authenticating the client, or is otherwise malforme..." Do you have any idea where I am messing around.?
@shiroyasha9
@shiroyasha9 Год назад
@@hammadnaeem7691 to resolve this issue, i added a check for if we are using the app from expo go. If yes, set useProxy to true, else to false. Here is the supporting code: import Constants from "expo-constants"; const IS_EXPO_GO = Constants.appOwnership === "expo"; ... () => promptAsync({ useProxy: IS_EXPO_GO, showInRecents: true })
@azamtamboli3186
@azamtamboli3186 Год назад
This is awesome content. Can you make a video on this since this is the most trending method to authenticate user. OTP verification for expo react native app where user only enters his mobile number, an otp is sent to his phone via sms which is automatically read and filled up and by our program and sent to server for verification, server verifies it and finally user logs in. Using google api to send, receive and verify otp.
@LioMun
@LioMun Год назад
any class component example?
@MissCoding
@MissCoding Год назад
I have a video converting class components to functional, you can watch that and should be able to reverse it to utilise this code as a class component :)
@MissCoding
@MissCoding Год назад
Converting from a Class Component to a Functional Component - React or React Native ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LXSB8soWmw4.html
@dinhbao8220
@dinhbao8220 Год назад
your permission has been blocked: This app's request is invalid, please help me
@simonkovac7451
@simonkovac7451 Год назад
Hello Chelsea @MissCoding do you know why the response that comes from Google.useAuthRequest could have refreshToken undefined ?
@MissCoding
@MissCoding Год назад
Are you in expo go or standalone app? I think in Expo Go it will be undefined
@simonkovac7451
@simonkovac7451 Год назад
@@MissCoding Hey, thank you for answer. I am in expo go yes. But how do I go about it since I need to prepare the app and all the logic and I am developing using expo.
@MissCoding
@MissCoding Год назад
@@simonkovac7451 need to build a standalone app and use expo-dev-client for writing the refresh token logic :) it should be in the video!
@simonkovac7451
@simonkovac7451 Год назад
@@MissCoding Alright I didint understand then. Thank you for your time and great video.
@jcmujica5830
@jcmujica5830 Год назад
Thank you!
@ahurein1641
@ahurein1641 Год назад
thank you
@amiribrahim01
@amiribrahim01 Год назад
thank you!
Далее
Mobile Devs Hate Servers. Expo Wants To Fix That.
16:05
React Native Login with JWT Auth Context
24:59
Просмотров 59 тыс.
React Native Database & User Authentication
27:38
Просмотров 22 тыс.