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
expo install @react-native-async-storage/async-storage expo-auth-session expo-randomInstall this library
expo install expo-keycloak-authimport 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 (
<KeycloakProvider {...keycloakConfiguration}>
<View style={styles.container}>
<Auth />
</View>
</KeycloakProvider>
);
}
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 <ActivityIndicator />;
if (!isLoggedIn)
return (
<View style={{ margin: 24 }}>
<Button onPress={login} title="Login" />
</View>
);
return (
<View style={{ margin: 24 }}>
<Text style={{ fontSize: 17, marginBottom: 24 }}>Logged in!</Text>
<Text>Your Access Token</Text>
<TextInput value={token}></TextInput>
<Button onPress={logout} title={"Logout"} style={{ marginTop: 24 }} />
</View>
);
};
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() |
|
| scheme (string) | optional | Your app scheme defined in app.json. This props used to generate redirect uri scheme for standalone app. default redirect_uri = ${scheme}://redirect/auth |
|
| disableAutoRefresh (boolean) | optional | false | |
| nativeRedirectPath (string) | optional | undefined | Path to override default redirect path |
| refreshTimeBuffer (number) | optional | 20 | time buffer in seconds to invoke AuthSession.refreshAsync() 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