/expo-keycloak-auth

expo-auth-session wrapper for keycloak authentication npm package

Primary LanguageJavaScript

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.

NPM

Install

Install peer dependencies

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

Install this library

expo install 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