@alimonia/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

Install peer dependencies

expo install @react-native-async-storage/async-storage expo-auth-session expo-random

Install this library

npm install @alimonia/expo-keycloak-auth

Usage

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 (
    <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",
  },
});

Configuration

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.

License

MIT © rubhiauliatirta