Create a React Native App with Login in 10 Minutes
This tutorial shows you how to add a login feature to a React Native application.
Create a React Native App with Login in 10 Minutes
This tutorial shows you how to add a login feature to a React Native application.
Tobias Gerstenberg
Good to see an updated guide on RN, thanks for this
VG
Thanks for the article. Application works for me but after clicking on logout, it keeps showing me sign in pop up and user never gets signed out. Any suggestion to fix this?
Matt Raible
When you click Logout, there is a popup that requests permissions to open a browser window. Unfortunately, there’s no workaround for this. Is this the issue you’re talking about, or is it something else?
I went through this tutorial this morning (using OktaDev Schematics) and was able to logout successfully. When I clicked Login, it prompted me to sign in again.
Prabhu Raj
Thanks for the detail guide. I tried implementing this and it is working as expected in IOS. However, in Android. it is not working. When login is called ( signin() ), nothing really happens. No error too. I tried the same with your source github project and it’s not working there as well. Only IOS works. Could you please provide a fix for android?
Matt Raible
Hello Prabhu,
I’m not sure that a fix is needed for Android. I recorded a screencast for this blog post and you can see the Android part starting at 8:06. It worked for me!
Laszlo L. Mári
I ran into the same exact issue as Prabhu. It just isn’t popping up on a physical device (maybe it only works in the emulator?)
Matt Raible
Hmmm, I’m not sure. I don’t have an Angular device to test it with. Can you please enter an issue in the React Native SDK GitHub project with steps to reproduce the problem?
Prabhu Raj
Thanks Matt. Laszlo, it worked for me when I properly configured my redirect scheme in build gradle. manifestPlaceholders = [appAuthRedirectScheme: “packagename”]. Note that you need to provide your package name of the android and not the okta domain.
Avinash Kadam
Hi Matt,
I implemented okta sso with custom signin page with react native. I am able to login through okta. on SSO login response i get JSESSIONID(set from backend). I am calling our APIs based on this JSESSIONID. But, in response i am getting response headers only. Same approach we implemented on WEB it is working fine there. But not sure why it is not working on mobile. Can you suggest.
Avinash Kadam
Hi Matt,
Do we need to write code for handling PKCE or it works on their own? Because i tried to access API with this ‘Authorization’: Bearer ${self.state.accessToken}
in headers but it didnt work. Any idea?
Matt Raible
Did you put the accessToken in the state? That’s the only way it’ll be there. Otherwise, you can get it from Okta’s SDK: https://github.com/okta/okt…
Acasa
Hi, thank you very much for this blog post it has been very helpful. For my application I was wondering how I would be able to a custom sign up/create account with this to pair it with the custom sign in? Thank you!
Matt Raible
Hello Acasa,
I’m glad you found this blog post useful! To add custom signup, I believe you need to create a backend API and then use a Node, .NET, or Java SDK to add new users. I don’t believe the React Native SDK has this ability, but I could be wrong.
5BJohn
Great writeup!! When getting the user from id token, which field represents a unique identifier that I can store in a db?
Matt Raible
The “sub” claim is your best bet.
Shafique
Is there a way to use this with React-Native TypeScript? I followed your instructions above, and the result is to add .js files, not .ts or .tsx files. Thanks.
Matt Raible
OktaDev Schematics doesn’t support TypeScript (yet), but we do have a post that shows how to build a React Native app with TypeScript. https://developer.okta.com/…
Tecnologias de la Informacion
Hi,
We are integrating OKTA authentication in our mobile app. This app is developed using react-native; we have integrated the OKTA libraries and works very well with “browser-sign-in” scheme; but every time a user log on, a message asking for permissions are showed. The prompt message says ““MyApp” wants to use “okta.com” to Sign In” with the options Cancel or Continue; so, as you can figure out; this is annoying for end users. Is there any way that we can “avoid” this message every time for user authentication? Is there any recommended workaround to achieve this?
Thanks so much in advance
Matt Raible
That’s a part of Apple’s authentication system, and can’t be worked around. There’s a similar question that someone entered recently.