Build a React Native Application and Authenticate with OAuth 2.0
Learn how to add authentication to your React Native applications with AppAuth and Okta.
George Loring
Thank you for this article. I was able to get it working following your instructions. How would you log out of the application? I can click “Revoke” and that takes me back to the Authorize page but then when I click Authorize it seems like my information is cached because I am not presented with the login page again and I’m logged in. What if we were on a shared device and needed a different person to log in?
Matt Raible
Hello George: you might try this solution. Add the following to your config:
additionalParameters: {
prompt: ‘login’
}
Aske Ertmann
I had some issues getting this to work with a non developer account. This was due to not having the API Access Management package, that allows for creating custom Authorization Servers, which is used in this example.
However there is a standard Authorization Server available for all accounts without the API Access Management package, which supports PKCE. It’s available at “https://{yourOktaDomain}.okta.com/oauth2” (without the /default part).
However when issuing tokens it uses just “https://{yourOktaDomain}.okta.com”, so use that as issuer without the “/oauth2” part.
Additionally the standard Authorization Server doesn’t provide a OIDC discovery endpoint, so you have to configure the server configuration manually (which also avoids an additional round trip to fetch the configuration).
Here’s the needed configuration:
issuer: ‘https://{yourOktaDomain}.okta.com’,
clientId: ‘{yourOktaClientId}’,
redirectUrl: ‘com.okta.{yourOktaDomain}:/callback’,
serviceConfiguration: {
authorizationEndpoint: ‘https://{yourOktaDomain}.okta.com/oauth2/v1/authorize’,
tokenEndpoint: ‘https://{yourOktaDomain}.okta.com/oauth2/v1/token’,
registrationEndpoint: ‘https://{yourOktaDomain}.okta.com/oauth2/v1/clients’
}
Hope that helps someone else.
Matt Raible
Hello Aske: while this might work, it’s not the recommended setup. It will work if you need an ID token only. You won’t be able to validate the access token returned for your APIs. If you want to validate the access token returned for your APIs, you need to use a custom Authorization Server (not the one defined for your org). When you create a new developer account, a custom AS (called “default”) is created for you. To use this one, the issuer (and subsequent values) should be https://{yourOktaDomain}.okta.com/oauth2/default.
Daniel Sierra
Hello. How can I do if I have my own login screen on my app and I don’t want to be asked for the username and password twice (on the device on my app and then on the Okta’s callback page)?
Matt Raible
Hello Daniel - we do plan to add native sign-in for React Native (and the rest of our mobile SDKs) this year. Unfortunately, it’s not available yet.
Andy Herzog
Hi Matt, tagging on to this request. If I add additionalParameters: { I get prompted for my password but it does not allow me to change usernames. If I click the “sign out” button I can change the username but upon successful log in I am brought to my Okta dashboard rather than back to my application. Is there a way to prompt for both username and password instead of just password?
prompt: ‘login’
}
Matt Raible
AFAIK, this is a missing feature in the React Native App Auth library. You might want to check out this issue or open a new one.
Juan De la Cruz
Formidable’s example is no longer available 
(the one which we are going to get the assets and components from)
Matt Raible
Thanks for the heads up. The example is still there, the paths have just changed:
svn export https://github.com/FormidableLabs/react-native-app-auth/trunk/Example/Latest/components
svn export https://github.com/FormidableLabs/react-native-app-auth/trunk/Example/Latest/assets
I’ll update this post.
Biathanatos
@disqus_JeTrXe41Sl:disqus It looks like prompting it to select_account instead is intended, but that hasn’t worked for me with Okta.
https://github.com/Formidab…
Andy Herzog
Good find, unfortunately looks like that is not one of Okta’s allowed values. https://developer.okta.com/…
Kory Sasaoka
Hi Matt, thanks for the article. Any word on native sign-in?
piyush tripathi
In the backend code , where are we validating the access token sent in the request . I couldn’t find it , or may be I’m not looking at the right place.
Edit - Is it auto-configured by spring-security-oauth2-autoconfigure dependency and doesn’t require any code ?
Matt Raible
This is handled by the Okta Spring Boot Starter and the autoconfigure dependency. You can see them in the example’s code here. Okta’s Spring Boot Starter is configured from application.properties.
Tobias Gerstenberg
I’d second that. While Authorization Code Grant seems to be best practice from a security perspective, a browser redirect after opening a native mobile app was deemed “suprising” and “strange” by our users. Any update on when custom in-app login will be possible with React Native & Okta would be appreciated.
Matt Raible
Hello Tobias,
I talked to our engineering team this morning. Native sign-in is available for our Android SDK and iOS SDK. Adding native sign-in for React Native is on our roadmap, but not scheduled. I’m sorry we can’t be more firm about dates.
Doriya Spielman
Work well thank you! after Im signing in how can i move to another screen?
Pranav Kumar Prasad
Hi Matt, thank you for this. I am actually trying to implement a social login with Okta along with PKCE, in React Native CLI. I have already integrated google idp with my Okta account, but finding it a bit tricky to use it in React Native…any help here…? Thanks.