BranchesTags

Repository files navigation

CI Status

React Native Sample Applications for Okta

This repository contains several sample applications that demonstrate various Okta use-cases in your React Native application.

Each sample makes use of the Okta React Native Library.

Supported Platforms

Prerequisites

Before running the samples, you will need the following:

  • An Okta Developer Account, you can sign up for one at https://developer.okta.com/signup/.
  • An Okta Application, configured for Native mode. This is done from the Okta Developer Console. After login, from the Admin dashboard, navigate to Applications → Add Application. Choose Native as the platform. Populate your new Native OpenID Connect application with values similar to:
    • Application Name
      • Native OpenId Connect App (must be unique)
    • Login redirect URIs
      • com.okta.example:/callback
    • Logout redirect URIs
      • com.okta.example:/logoutCallback
    • Grant type allowed
      • Authorization Code
      • Refresh Token
  • If you are developing with an Android device emulator, make sure to check out the React Native - Android Development setup instructions.

Configuration

For each sample, you will need to gather the following information from the Okta Developer Console:

  • Client ID - The client ID of the Native application that you created earlier. This can be found on the "General" tab of an application, or the list of applications. This identifies the application that tokens will be minted for.
  • Redirect URI This must not be the same asEnd Session Redirect URI, otherwise Android will throw an error on signOut.
  • Issuer/Discovery URI - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and /oauth2/default. For example, https://dev-1234.oktapreview.com/oauth2/default.

Now place these values into the file samples.config.js located under each sample folder, here let's use dev-1234.oktapreview.com as the okta domain:

exportdefault{oidc: {clientId: CLIENT_ID,// a1234abcdEf8gH1234mnIKS40discoveryUri: ISSUER,// https://dev-1234.oktapreview.com/oauth2/defaultredirectUri: REDIRECT_URI,// com.okta.example:/callbackendSessionRedirectUri: LOGOUT_REDIRECT_URI,// 'com.okta.example:/logoutCallback',scope: ["openid","profile","offline_access"],requireHardwareBackedKeyStore: false}};

For Android

  • In browser-sign-in/android/app/build.gradle change value of appAuthRedirectScheme from com.okta.example to your redirect scheme used in Okta app configuration above

Samples

Please find the sample that fits your use-case from the table below.

SampleDescription
Browser Sign InA React Native application that will redirect the user to the Okta browser login page of your Org for authentication. The user is redirected back to the React Native application after authenticating.
Custom Sign InA React Native application that adopts native authorization to take control over authorization flow and/or provide custom UI.

Troubleshooting

  • Please use redirect scheme (com.okta.example in examples above) other than com.browsersignin or exp+browsersignin for Browser Sign In sample for Android

  • Don't use expo-dev-client in Custom Sign In sample for iOS

  • If you run samples on Android emulator please use system images with Google Play services and not Android Open Source image. Virtual device should have Chrome browser.

About

samples-js-react-native

github.com/okta/samples-js-react-native

Resources

Readme
License

Contributing

Contributing

Security policy

Security policy
Activity
Custom properties

Stars

32 stars

Watchers

80 watching

Forks

53 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
CI Status
React Native Sample Applications for Okta
This repository contains several sample applications that demonstrate various Okta use-cases in your React Native application.
Each sample makes use of the Okta React Native Library.
Supported Platforms
Prerequisites
Before running the samples, you will need the following:
  • An Okta Developer Account, you can sign up for one at https://developer.okta.com/signup/.
  • An Okta Application, configured for Native mode. This is done from the Okta Developer Console. After login, from the Admin dashboard, navigate to Applications → Add Application. Choose Native as the platform. Populate your new Native OpenID Connect application with values similar to:

    • Application Name
      • Native OpenId Connect App (must be unique)
    • Login redirect URIs
      • com.okta.example:/callback
    • Logout redirect URIs
      • com.okta.example:/logoutCallback
    • Grant type allowed
      • Authorization Code
      • Refresh Token
  • If you are developing with an Android device emulator, make sure to check out the React Native - Android Development setup instructions.
Configuration
For each sample, you will need to gather the following information from the Okta Developer Console:
  • Client ID - The client ID of the Native application that you created earlier. This can be found on the "General" tab of an application, or the list of applications. This identifies the application that tokens will be minted for.
  • Redirect URI This must not be the same asEnd Session Redirect URI, otherwise Android will throw an error on signOut.
  • Issuer/Discovery URI - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and /oauth2/default. For example, https://dev-1234.oktapreview.com/oauth2/default.
Now place these values into the file samples.config.js located under each sample folder, here let's use dev-1234.oktapreview.com as the okta domain:
exportdefault{oidc: {clientId: CLIENT_ID,// a1234abcdEf8gH1234mnIKS40discoveryUri: ISSUER,// https://dev-1234.oktapreview.com/oauth2/defaultredirectUri: REDIRECT_URI,// com.okta.example:/callbackendSessionRedirectUri: LOGOUT_REDIRECT_URI,// 'com.okta.example:/logoutCallback',scope: ["openid","profile","offline_access"],requireHardwareBackedKeyStore: false}};
For Android
  • In browser-sign-in/android/app/build.gradle change value of appAuthRedirectScheme from com.okta.example to your redirect scheme used in Okta app configuration above
Samples
Please find the sample that fits your use-case from the table below.
SampleDescription
Browser Sign InA React Native application that will redirect the user to the Okta browser login page of your Org for authentication. The user is redirected back to the React Native application after authenticating.
Custom Sign InA React Native application that adopts native authorization to take control over authorization flow and/or provide custom UI.
Troubleshooting
  • Please use redirect scheme (com.okta.example in examples above) other than com.browsersignin or exp+browsersignin for Browser Sign In sample for Android
  • Don't use expo-dev-client in Custom Sign In sample for iOS
  • If you run samples on Android emulator please use system images with Google Play services and not Android Open Source image. Virtual device should have Chrome browser.
About
samples-js-react-native
github.com/okta/samples-js-react-native
Resources
Readme
License
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
32 stars
Watchers
80 watching
Forks
53 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
CI Status
React Native Sample Applications for Okta
This repository contains several sample applications that demonstrate various Okta use-cases in your React Native application.
Each sample makes use of the Okta React Native Library.
Supported Platforms
Prerequisites
Before running the samples, you will need the following:
  • An Okta Developer Account, you can sign up for one at https://developer.okta.com/signup/.
  • An Okta Application, configured for Native mode. This is done from the Okta Developer Console. After login, from the Admin dashboard, navigate to Applications → Add Application. Choose Native as the platform. Populate your new Native OpenID Connect application with values similar to:

    • Application Name
      • Native OpenId Connect App (must be unique)
    • Login redirect URIs
      • com.okta.example:/callback
    • Logout redirect URIs
      • com.okta.example:/logoutCallback
    • Grant type allowed
      • Authorization Code
      • Refresh Token
  • If you are developing with an Android device emulator, make sure to check out the React Native - Android Development setup instructions.
Configuration
For each sample, you will need to gather the following information from the Okta Developer Console:
  • Client ID - The client ID of the Native application that you created earlier. This can be found on the "General" tab of an application, or the list of applications. This identifies the application that tokens will be minted for.
  • Redirect URI This must not be the same asEnd Session Redirect URI, otherwise Android will throw an error on signOut.
  • Issuer/Discovery URI - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and /oauth2/default. For example, https://dev-1234.oktapreview.com/oauth2/default.
Now place these values into the file samples.config.js located under each sample folder, here let's use dev-1234.oktapreview.com as the okta domain:
exportdefault{oidc: {clientId: CLIENT_ID,// a1234abcdEf8gH1234mnIKS40discoveryUri: ISSUER,// https://dev-1234.oktapreview.com/oauth2/defaultredirectUri: REDIRECT_URI,// com.okta.example:/callbackendSessionRedirectUri: LOGOUT_REDIRECT_URI,// 'com.okta.example:/logoutCallback',scope: ["openid","profile","offline_access"],requireHardwareBackedKeyStore: false}};
For Android
  • In browser-sign-in/android/app/build.gradle change value of appAuthRedirectScheme from com.okta.example to your redirect scheme used in Okta app configuration above
Samples
Please find the sample that fits your use-case from the table below.
SampleDescription
Browser Sign InA React Native application that will redirect the user to the Okta browser login page of your Org for authentication. The user is redirected back to the React Native application after authenticating.
Custom Sign InA React Native application that adopts native authorization to take control over authorization flow and/or provide custom UI.
Troubleshooting
  • Please use redirect scheme (com.okta.example in examples above) other than com.browsersignin or exp+browsersignin for Browser Sign In sample for Android
  • Don't use expo-dev-client in Custom Sign In sample for iOS
  • If you run samples on Android emulator please use system images with Google Play services and not Android Open Source image. Virtual device should have Chrome browser.
About
samples-js-react-native
github.com/okta/samples-js-react-native
Resources
Readme
License
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
32 stars
Watchers
80 watching
Forks
53 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
CI Status
React Native Sample Applications for Okta
This repository contains several sample applications that demonstrate various Okta use-cases in your React Native application.
Each sample makes use of the Okta React Native Library.
Supported Platforms
Prerequisites
Before running the samples, you will need the following:
  • An Okta Developer Account, you can sign up for one at https://developer.okta.com/signup/.
  • An Okta Application, configured for Native mode. This is done from the Okta Developer Console. After login, from the Admin dashboard, navigate to Applications → Add Application. Choose Native as the platform. Populate your new Native OpenID Connect application with values similar to:

    • Application Name
      • Native OpenId Connect App (must be unique)
    • Login redirect URIs
      • com.okta.example:/callback
    • Logout redirect URIs
      • com.okta.example:/logoutCallback
    • Grant type allowed
      • Authorization Code
      • Refresh Token
  • If you are developing with an Android device emulator, make sure to check out the React Native - Android Development setup instructions.
Configuration
For each sample, you will need to gather the following information from the Okta Developer Console:
  • Client ID - The client ID of the Native application that you created earlier. This can be found on the "General" tab of an application, or the list of applications. This identifies the application that tokens will be minted for.
  • Redirect URI This must not be the same asEnd Session Redirect URI, otherwise Android will throw an error on signOut.
  • Issuer/Discovery URI - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and /oauth2/default. For example, https://dev-1234.oktapreview.com/oauth2/default.
Now place these values into the file samples.config.js located under each sample folder, here let's use dev-1234.oktapreview.com as the okta domain:
exportdefault{oidc: {clientId: CLIENT_ID,// a1234abcdEf8gH1234mnIKS40discoveryUri: ISSUER,// https://dev-1234.oktapreview.com/oauth2/defaultredirectUri: REDIRECT_URI,// com.okta.example:/callbackendSessionRedirectUri: LOGOUT_REDIRECT_URI,// 'com.okta.example:/logoutCallback',scope: ["openid","profile","offline_access"],requireHardwareBackedKeyStore: false}};
For Android
  • In browser-sign-in/android/app/build.gradle change value of appAuthRedirectScheme from com.okta.example to your redirect scheme used in Okta app configuration above
Samples
Please find the sample that fits your use-case from the table below.
SampleDescription
Browser Sign InA React Native application that will redirect the user to the Okta browser login page of your Org for authentication. The user is redirected back to the React Native application after authenticating.
Custom Sign InA React Native application that adopts native authorization to take control over authorization flow and/or provide custom UI.
Troubleshooting
  • Please use redirect scheme (com.okta.example in examples above) other than com.browsersignin or exp+browsersignin for Browser Sign In sample for Android
  • Don't use expo-dev-client in Custom Sign In sample for iOS
  • If you run samples on Android emulator please use system images with Google Play services and not Android Open Source image. Virtual device should have Chrome browser.
About
samples-js-react-native
github.com/okta/samples-js-react-native
Resources
Readme
License
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
32 stars
Watchers
80 watching
Forks
53 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
CI Status
React Native Sample Applications for Okta
This repository contains several sample applications that demonstrate various Okta use-cases in your React Native application.
Each sample makes use of the Okta React Native Library.
Supported Platforms
Prerequisites
Before running the samples, you will need the following:
  • An Okta Developer Account, you can sign up for one at https://developer.okta.com/signup/.
  • An Okta Application, configured for Native mode. This is done from the Okta Developer Console. After login, from the Admin dashboard, navigate to Applications → Add Application. Choose Native as the platform. Populate your new Native OpenID Connect application with values similar to:

    • Application Name
      • Native OpenId Connect App (must be unique)
    • Login redirect URIs
      • com.okta.example:/callback
    • Logout redirect URIs
      • com.okta.example:/logoutCallback
    • Grant type allowed
      • Authorization Code
      • Refresh Token
  • If you are developing with an Android device emulator, make sure to check out the React Native - Android Development setup instructions.
Configuration
For each sample, you will need to gather the following information from the Okta Developer Console:
  • Client ID - The client ID of the Native application that you created earlier. This can be found on the "General" tab of an application, or the list of applications. This identifies the application that tokens will be minted for.
  • Redirect URI This must not be the same asEnd Session Redirect URI, otherwise Android will throw an error on signOut.
  • Issuer/Discovery URI - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and /oauth2/default. For example, https://dev-1234.oktapreview.com/oauth2/default.
Now place these values into the file samples.config.js located under each sample folder, here let's use dev-1234.oktapreview.com as the okta domain:
exportdefault{oidc: {clientId: CLIENT_ID,// a1234abcdEf8gH1234mnIKS40discoveryUri: ISSUER,// https://dev-1234.oktapreview.com/oauth2/defaultredirectUri: REDIRECT_URI,// com.okta.example:/callbackendSessionRedirectUri: LOGOUT_REDIRECT_URI,// 'com.okta.example:/logoutCallback',scope: ["openid","profile","offline_access"],requireHardwareBackedKeyStore: false}};
For Android
  • In browser-sign-in/android/app/build.gradle change value of appAuthRedirectScheme from com.okta.example to your redirect scheme used in Okta app configuration above
Samples
Please find the sample that fits your use-case from the table below.
SampleDescription
Browser Sign InA React Native application that will redirect the user to the Okta browser login page of your Org for authentication. The user is redirected back to the React Native application after authenticating.
Custom Sign InA React Native application that adopts native authorization to take control over authorization flow and/or provide custom UI.
Troubleshooting
  • Please use redirect scheme (com.okta.example in examples above) other than com.browsersignin or exp+browsersignin for Browser Sign In sample for Android
  • Don't use expo-dev-client in Custom Sign In sample for iOS
  • If you run samples on Android emulator please use system images with Google Play services and not Android Open Source image. Virtual device should have Chrome browser.
About
samples-js-react-native
github.com/okta/samples-js-react-native
Resources
Readme
License
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
32 stars
Watchers
80 watching
Forks
53 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
CI Status
React Native Sample Applications for Okta
This repository contains several sample applications that demonstrate various Okta use-cases in your React Native application.
Each sample makes use of the Okta React Native Library.
Supported Platforms
Prerequisites
Before running the samples, you will need the following:
  • An Okta Developer Account, you can sign up for one at https://developer.okta.com/signup/.
  • An Okta Application, configured for Native mode. This is done from the Okta Developer Console. After login, from the Admin dashboard, navigate to Applications → Add Application. Choose Native as the platform. Populate your new Native OpenID Connect application with values similar to:

    • Application Name
      • Native OpenId Connect App (must be unique)
    • Login redirect URIs
      • com.okta.example:/callback
    • Logout redirect URIs
      • com.okta.example:/logoutCallback
    • Grant type allowed
      • Authorization Code
      • Refresh Token
  • If you are developing with an Android device emulator, make sure to check out the React Native - Android Development setup instructions.
Configuration
For each sample, you will need to gather the following information from the Okta Developer Console:
  • Client ID - The client ID of the Native application that you created earlier. This can be found on the "General" tab of an application, or the list of applications. This identifies the application that tokens will be minted for.
  • Redirect URI This must not be the same asEnd Session Redirect URI, otherwise Android will throw an error on signOut.
  • Issuer/Discovery URI - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and /oauth2/default. For example, https://dev-1234.oktapreview.com/oauth2/default.
Now place these values into the file samples.config.js located under each sample folder, here let's use dev-1234.oktapreview.com as the okta domain:
exportdefault{oidc: {clientId: CLIENT_ID,// a1234abcdEf8gH1234mnIKS40discoveryUri: ISSUER,// https://dev-1234.oktapreview.com/oauth2/defaultredirectUri: REDIRECT_URI,// com.okta.example:/callbackendSessionRedirectUri: LOGOUT_REDIRECT_URI,// 'com.okta.example:/logoutCallback',scope: ["openid","profile","offline_access"],requireHardwareBackedKeyStore: false}};
For Android
  • In browser-sign-in/android/app/build.gradle change value of appAuthRedirectScheme from com.okta.example to your redirect scheme used in Okta app configuration above
Samples
Please find the sample that fits your use-case from the table below.
SampleDescription
Browser Sign InA React Native application that will redirect the user to the Okta browser login page of your Org for authentication. The user is redirected back to the React Native application after authenticating.
Custom Sign InA React Native application that adopts native authorization to take control over authorization flow and/or provide custom UI.
Troubleshooting
  • Please use redirect scheme (com.okta.example in examples above) other than com.browsersignin or exp+browsersignin for Browser Sign In sample for Android
  • Don't use expo-dev-client in Custom Sign In sample for iOS
  • If you run samples on Android emulator please use system images with Google Play services and not Android Open Source image. Virtual device should have Chrome browser.
About
samples-js-react-native
github.com/okta/samples-js-react-native
Resources
Readme
License
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
32 stars
Watchers
80 watching
Forks
53 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
CI Status
React Native Sample Applications for Okta
This repository contains several sample applications that demonstrate various Okta use-cases in your React Native application.
Each sample makes use of the Okta React Native Library.
Supported Platforms
Prerequisites
Before running the samples, you will need the following:
  • An Okta Developer Account, you can sign up for one at https://developer.okta.com/signup/.
  • An Okta Application, configured for Native mode. This is done from the Okta Developer Console. After login, from the Admin dashboard, navigate to Applications → Add Application. Choose Native as the platform. Populate your new Native OpenID Connect application with values similar to:

    • Application Name
      • Native OpenId Connect App (must be unique)
    • Login redirect URIs
      • com.okta.example:/callback
    • Logout redirect URIs
      • com.okta.example:/logoutCallback
    • Grant type allowed
      • Authorization Code
      • Refresh Token
  • If you are developing with an Android device emulator, make sure to check out the React Native - Android Development setup instructions.
Configuration
For each sample, you will need to gather the following information from the Okta Developer Console:
  • Client ID - The client ID of the Native application that you created earlier. This can be found on the "General" tab of an application, or the list of applications. This identifies the application that tokens will be minted for.
  • Redirect URI This must not be the same asEnd Session Redirect URI, otherwise Android will throw an error on signOut.
  • Issuer/Discovery URI - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and /oauth2/default. For example, https://dev-1234.oktapreview.com/oauth2/default.
Now place these values into the file samples.config.js located under each sample folder, here let's use dev-1234.oktapreview.com as the okta domain:
exportdefault{oidc: {clientId: CLIENT_ID,// a1234abcdEf8gH1234mnIKS40discoveryUri: ISSUER,// https://dev-1234.oktapreview.com/oauth2/defaultredirectUri: REDIRECT_URI,// com.okta.example:/callbackendSessionRedirectUri: LOGOUT_REDIRECT_URI,// 'com.okta.example:/logoutCallback',scope: ["openid","profile","offline_access"],requireHardwareBackedKeyStore: false}};
For Android
  • In browser-sign-in/android/app/build.gradle change value of appAuthRedirectScheme from com.okta.example to your redirect scheme used in Okta app configuration above
Samples
Please find the sample that fits your use-case from the table below.
SampleDescription
Browser Sign InA React Native application that will redirect the user to the Okta browser login page of your Org for authentication. The user is redirected back to the React Native application after authenticating.
Custom Sign InA React Native application that adopts native authorization to take control over authorization flow and/or provide custom UI.
Troubleshooting
  • Please use redirect scheme (com.okta.example in examples above) other than com.browsersignin or exp+browsersignin for Browser Sign In sample for Android
  • Don't use expo-dev-client in Custom Sign In sample for iOS
  • If you run samples on Android emulator please use system images with Google Play services and not Android Open Source image. Virtual device should have Chrome browser.
About
samples-js-react-native
github.com/okta/samples-js-react-native
Resources
Readme
License
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
32 stars
Watchers
80 watching
Forks
53 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
CI Status
React Native Sample Applications for Okta
This repository contains several sample applications that demonstrate various Okta use-cases in your React Native application.
Each sample makes use of the Okta React Native Library.
Supported Platforms
Prerequisites
Before running the samples, you will need the following:
  • An Okta Developer Account, you can sign up for one at https://developer.okta.com/signup/.
  • An Okta Application, configured for Native mode. This is done from the Okta Developer Console. After login, from the Admin dashboard, navigate to Applications → Add Application. Choose Native as the platform. Populate your new Native OpenID Connect application with values similar to:

    • Application Name
      • Native OpenId Connect App (must be unique)
    • Login redirect URIs
      • com.okta.example:/callback
    • Logout redirect URIs
      • com.okta.example:/logoutCallback
    • Grant type allowed
      • Authorization Code
      • Refresh Token
  • If you are developing with an Android device emulator, make sure to check out the React Native - Android Development setup instructions.
Configuration
For each sample, you will need to gather the following information from the Okta Developer Console:
  • Client ID - The client ID of the Native application that you created earlier. This can be found on the "General" tab of an application, or the list of applications. This identifies the application that tokens will be minted for.
  • Redirect URI This must not be the same asEnd Session Redirect URI, otherwise Android will throw an error on signOut.
  • Issuer/Discovery URI - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and /oauth2/default. For example, https://dev-1234.oktapreview.com/oauth2/default.
Now place these values into the file samples.config.js located under each sample folder, here let's use dev-1234.oktapreview.com as the okta domain:
exportdefault{oidc: {clientId: CLIENT_ID,// a1234abcdEf8gH1234mnIKS40discoveryUri: ISSUER,// https://dev-1234.oktapreview.com/oauth2/defaultredirectUri: REDIRECT_URI,// com.okta.example:/callbackendSessionRedirectUri: LOGOUT_REDIRECT_URI,// 'com.okta.example:/logoutCallback',scope: ["openid","profile","offline_access"],requireHardwareBackedKeyStore: false}};
For Android
  • In browser-sign-in/android/app/build.gradle change value of appAuthRedirectScheme from com.okta.example to your redirect scheme used in Okta app configuration above
Samples
Please find the sample that fits your use-case from the table below.
SampleDescription
Browser Sign InA React Native application that will redirect the user to the Okta browser login page of your Org for authentication. The user is redirected back to the React Native application after authenticating.
Custom Sign InA React Native application that adopts native authorization to take control over authorization flow and/or provide custom UI.
Troubleshooting
  • Please use redirect scheme (com.okta.example in examples above) other than com.browsersignin or exp+browsersignin for Browser Sign In sample for Android
  • Don't use expo-dev-client in Custom Sign In sample for iOS
  • If you run samples on Android emulator please use system images with Google Play services and not Android Open Source image. Virtual device should have Chrome browser.
About
samples-js-react-native
github.com/okta/samples-js-react-native
Resources
Readme
License
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
32 stars
Watchers
80 watching
Forks
53 forks
Report repository
Releases
Packages
Used by
Contributors
Languages