Expo implementation using expo-auth-session and expo-secure-store.
npm install react-native-oidc-auth-exporeact-native-oidc-auth-core: framework-agnostic core with login, logout, refresh, and secure token storage
react-native-oidc-auth-expo: Expo implementation using expo-auth-session and expo-secure-store.
react-native-oidc-auth: Bare React Native implementation using react-native-app-auth and react-native-keychain.
sh
npm i react-native-oidc-auth-expo
`
Bare React Native apps:
`sh
npm i react-native-oidc-auth
`
---
Getting Started
$3
Configure your OIDC provider:
`ts
import { createOidcAuth, type OidcConfiguration, setTracingLogger } from 'react-native-oidc-auth'; // or react-native-oidc-auth-expo
const issuer = ${OIDC_URL}/realms/${OIDC_REALM};
const config: OidcConfiguration = {
issuer,
clientId: CLIENT_ID ?? '',
redirectUrl: REDIRECT_URI ?? '',
postLogoutRedirectUrl: REDIRECT_URI ?? '',
scopes: ['openid', 'profile'],
// Bare RN only:
dangerouslyAllowInsecureHttpRequests: __DEV__,
};
// Optional: Configure tracing
setTracingLogger(tracingLog);
export const oidcAuth = createOidcAuth(config);
`
$3
Wrap your app with the provider:
`tsx
import React from 'react';
import { OidcAuthProvider } from 'react-native-oidc-auth'; // or react-native-oidc-auth-expo
import { Main } from './components/main';
import { oidcAuth } from './lib/oidc-auth';
export default function App() {
return (
);
}
`
$3
Use the hook to access auth state and actions:
`tsx
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useOidcAuth } from 'react-native-oidc-auth'; // or react-native-oidc-auth-expo
export const Main: React.FC = () => {
const { isAuthenticated, user, login, logout } = useOidcAuth();
return (
{isAuthenticated ? (
<>
Home
Email: {user?.email}
) : (
<>
Login
)}
);
};
`
See Expo AuthSession docs for available options.
#### Customizing redirectUri
You can pass redirectUriOptions in your config to customize the redirect URI generated by Expo AuthSession:
`ts
const config = {
// ...other config options...
redirectUriOptions: {
scheme: 'myapp',
path: 'auth',
// any other options supported by Expo AuthSession
},
};
const session = await initializeAuthSession(config);
`
Advanced
You can depend on react-native-oidc-auth-core to build your own adapter for alternative auth/secure storage libraries.
Experimental
**This feature does not
perform dynamic client registration**.
Instead, it allows you to directly display the registration page and retrieve the token after completing the
registration flow (tested with Keycloak only).
1. Set the registration endpoint:
`ts
const config: OidcConfiguration = {
// ...
registrationPageEndpoint: ${issuer}/protocol/openid-connect/registrations,
};
`
2. Call register from your UI:
`tsx
import React from "react";
import { View, Text, Button } from "react-native";
import { useOidcAuth } from "react-native-oidc-auth";
export const Main: React.FC = () => {
const { isAuthenticated, login, register } = useOidcAuth();
return (
{!isAuthenticated ? (
<>
Login
) : (
Home
)}
);
};
`
Keycloak flow overview:
- User is redirected to the registration page.
- After submitting, Keycloak sends a verification email.
- The email link returns to the app; the token is stored, and the user is authenticated.
Examples
See examples/react-native and examples/expo` for demo apps.