Create a React Native App with Login in 10 Minutes

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 :slight_smile:

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! :slight_smile:

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. :blush: 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.