expo-auth-session wrapper for keycloak authentication
npm install expo-keycloak-auth> expo-auth-session wrapper for keycloak
This library is based on balgamat/expo-keycloak written in Javascript with re-implementation of automatic token refresh handling.
Install peer dependencies
``bash`
expo install @react-native-async-storage/async-storage expo-auth-session expo-random
Install this library
`bash`
expo install expo-keycloak-auth
`jsx
import React from "react";
import {
Text,
View,
Button,
StyleSheet,
ActivityIndicator,
TextInput,
} from "react-native";
import { KeycloakProvider, useKeycloak } from "expo-keycloak-auth";
import AppConfig from "./app.json";
export default function App() {
const keycloakConfiguration = {
clientId: "your-keycloak-clientId",
realm: "master", // your realm name
url: "https://your.keycloak.url.com/auth", // This is usually a url ending with /auth
scheme: AppConfig.expo.scheme,
};
return (
);
}
export const Auth = () => {
const {
ready, // If the discovery is already fetched and ready to prompt authentication flow
login, // The login function - opens the browser
isLoggedIn, // Helper boolean to use e.g. in your components down the tree
token, // Access token, if available
logout, // The logout function - Logs the user out
} = useKeycloak();
if (!ready) return
if (!isLoggedIn)
return (
);
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});
`
Pass this configuration to KeycloakProvider as props:
| Props Name | Usage | Default | Description |
| ---------------------------- | ------------ | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| clientId (string) | required | | One of your keycloak clientId |
| realm (string) | required | | One of your keycloak realm name |
| url (string) | required | | Your keycloak url. This is usually a url ending with /auth. This props (with realm) used to generate url ${url}/realms/${realm} for expo AuthSession.useAutoDiscovery() |app.json
| scheme (string) | optional | | Your app scheme defined in . This props used to generate redirect uri scheme for standalone app. default redirect_uri = ${scheme}://redirect/auth |AuthSession.refreshAsync()
| disableAutoRefresh (boolean) | optional | false | |
| nativeRedirectPath (string) | optional | undefined | Path to override default redirect path |
| refreshTimeBuffer (number) | optional | 20 | time buffer in seconds to invoke before token expires. |
| tokenStorageKey (string) | optional | keycloak_token | AsyncStorage key to save your token responses. |
| extraParams (object) | optional | undefined | Extra query params that'll be added to the query string |
> NOTE: You must add the scheme value to your valid redirect URLs on Keycloak admin console. It has to be like: ${scheme}://*` being ${scheme} the current selected value from AppConfig.
MIT © rubhiauliatirta