|
| 1 | +// @snippet:step1:start |
| 2 | +// @description Import the AppAuth wrapper and the env loader |
| 3 | +import Config from "react-native-config"; |
| 4 | +import { |
| 5 | + authorize, |
| 6 | + revoke, |
| 7 | + type AuthConfiguration, |
| 8 | +} from "react-native-app-auth"; |
| 9 | +// @snippet:step1:end |
| 10 | + |
| 11 | +// @snippet:step2:start |
| 12 | +// @description Configure the OIDC client with your SecureAuth app settings |
| 13 | +const authConfig: AuthConfiguration = { |
| 14 | + issuer: Config.ISSUER_URL!, |
| 15 | + clientId: Config.CLIENT_ID!, |
| 16 | + redirectUrl: Config.REDIRECT_URI!, |
| 17 | + scopes: Config.SCOPES!.split(" "), |
| 18 | +}; |
| 19 | +// @snippet:step2:end |
| 20 | + |
| 21 | +import React, { useEffect, useState } from "react"; |
| 22 | +import { Alert, Button, StyleSheet, Text, View } from "react-native"; |
| 23 | +import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"; |
| 24 | +import type { AuthorizeResult } from "react-native-app-auth"; |
| 25 | + |
| 26 | +// Hermes provides atob/btoa globally; declare for TypeScript since the RN |
| 27 | +// typescript-config preset doesn't include the DOM lib. |
| 28 | +declare const atob: (data: string) => string; |
| 29 | + |
| 30 | +type IdTokenClaims = { |
| 31 | + given_name?: string; |
| 32 | + family_name?: string; |
| 33 | + name?: string; |
| 34 | + email?: string; |
| 35 | + sub?: string; |
| 36 | +}; |
| 37 | + |
| 38 | +function decodeIdToken(idToken: string): IdTokenClaims { |
| 39 | + try { |
| 40 | + const [, payload] = idToken.split("."); |
| 41 | + if (!payload) return {}; |
| 42 | + const b64 = payload.replace(/-/g, "+").replace(/_/g, "/"); |
| 43 | + const padded = b64.padEnd(b64.length + ((4 - (b64.length % 4)) % 4), "="); |
| 44 | + return JSON.parse(atob(padded)) as IdTokenClaims; |
| 45 | + } catch { |
| 46 | + // Malformed / opaque token — fall through to the default welcome message |
| 47 | + return {}; |
| 48 | + } |
| 49 | +} |
| 50 | + |
| 51 | +function formatLocal(iso: string): string { |
| 52 | + const d = new Date(iso); |
| 53 | + return Number.isNaN(d.getTime()) ? iso : d.toLocaleString(); |
| 54 | +} |
| 55 | + |
| 56 | +function welcomeMessage(authState: AuthorizeResult): string { |
| 57 | + const claims = decodeIdToken(authState.idToken); |
| 58 | + const name = |
| 59 | + [claims.given_name, claims.family_name].filter(Boolean).join(" ") || |
| 60 | + claims.name || |
| 61 | + claims.email || |
| 62 | + claims.sub || |
| 63 | + "there"; |
| 64 | + return `Welcome, ${name}!`; |
| 65 | +} |
| 66 | + |
| 67 | +export default function App() { |
| 68 | + const [authState, setAuthState] = useState<AuthorizeResult | null>(null); |
| 69 | + const [expired, setExpired] = useState(false); |
| 70 | + const [error, setError] = useState<string | null>(null); |
| 71 | + |
| 72 | + // @snippet:step3:start |
| 73 | + // @description Open the system browser, run Auth Code + PKCE, and receive the tokens |
| 74 | + async function signIn() { |
| 75 | + setError(null); |
| 76 | + setExpired(false); |
| 77 | + try { |
| 78 | + const result = await authorize(authConfig); |
| 79 | + setAuthState(result); |
| 80 | + } catch (e) { |
| 81 | + setError(e instanceof Error ? e.message : String(e)); |
| 82 | + } |
| 83 | + } |
| 84 | + // @snippet:step3:end |
| 85 | + |
| 86 | + // @snippet:step4:start |
| 87 | + // @description Revoke the access token at the IdP and clear local auth state |
| 88 | + async function signOut() { |
| 89 | + if (!authState) return; |
| 90 | + try { |
| 91 | + await revoke(authConfig, { |
| 92 | + tokenToRevoke: authState.accessToken, |
| 93 | + sendClientId: true, |
| 94 | + }); |
| 95 | + } catch (e) { |
| 96 | + // Revocation is best-effort — proceed with local logout regardless. |
| 97 | + Alert.alert( |
| 98 | + "Sign-out warning", |
| 99 | + e instanceof Error ? e.message : String(e), |
| 100 | + ); |
| 101 | + } |
| 102 | + setAuthState(null); |
| 103 | + setExpired(false); |
| 104 | + } |
| 105 | + // @snippet:step4:end |
| 106 | + |
| 107 | + // Without offline_access there's no refresh token — once the access token |
| 108 | + // expires the only path forward is a fresh sign-in. Schedule a timer that |
| 109 | + // surfaces this to the user the moment the token elapses. |
| 110 | + useEffect(() => { |
| 111 | + if (!authState) return; |
| 112 | + const ms = |
| 113 | + new Date(authState.accessTokenExpirationDate).getTime() - Date.now(); |
| 114 | + if (ms <= 0) { |
| 115 | + setAuthState(null); |
| 116 | + setExpired(true); |
| 117 | + return; |
| 118 | + } |
| 119 | + const timer = setTimeout(() => { |
| 120 | + setAuthState(null); |
| 121 | + setExpired(true); |
| 122 | + }, ms); |
| 123 | + return () => clearTimeout(timer); |
| 124 | + }, [authState]); |
| 125 | + |
| 126 | + return ( |
| 127 | + <SafeAreaProvider> |
| 128 | + <SafeAreaView style={styles.container}> |
| 129 | + <Text style={styles.heading}>SecureAuth React Native PKCE Demo</Text> |
| 130 | + {error && ( |
| 131 | + <View style={styles.errorBox}> |
| 132 | + <Text style={styles.errorText}>Error: {error}</Text> |
| 133 | + <Button title="Try again" onPress={signIn} /> |
| 134 | + </View> |
| 135 | + )} |
| 136 | + {authState ? ( |
| 137 | + <View> |
| 138 | + <Text style={styles.welcome}>{welcomeMessage(authState)}</Text> |
| 139 | + <Text> |
| 140 | + Access token expires:{" "} |
| 141 | + {formatLocal(authState.accessTokenExpirationDate)} |
| 142 | + </Text> |
| 143 | + <View style={{ height: 24 }} /> |
| 144 | + <Button title="Sign out" onPress={signOut} /> |
| 145 | + </View> |
| 146 | + ) : ( |
| 147 | + !error && ( |
| 148 | + <View> |
| 149 | + {expired && ( |
| 150 | + <Text style={styles.expired}> |
| 151 | + Session expired. Please sign in again. |
| 152 | + </Text> |
| 153 | + )} |
| 154 | + <Button title="Sign in" onPress={signIn} /> |
| 155 | + </View> |
| 156 | + ) |
| 157 | + )} |
| 158 | + </SafeAreaView> |
| 159 | + </SafeAreaProvider> |
| 160 | + ); |
| 161 | +} |
| 162 | + |
| 163 | +const styles = StyleSheet.create({ |
| 164 | + container: { |
| 165 | + flex: 1, |
| 166 | + padding: 20, |
| 167 | + justifyContent: "center", |
| 168 | + alignItems: "center", |
| 169 | + }, |
| 170 | + heading: { fontSize: 20, fontWeight: "600", marginBottom: 24 }, |
| 171 | + welcome: { fontSize: 18, fontWeight: "600", marginBottom: 8 }, |
| 172 | + expired: { color: "#900", marginBottom: 12 }, |
| 173 | + errorBox: { padding: 12, backgroundColor: "#fee", marginBottom: 16 }, |
| 174 | + errorText: { color: "#900" }, |
| 175 | +}); |
0 commit comments