Skip to main content

React Native SDK

Complete guide to integrating Signia authentication in React Native applications.

Installation​

npm install @getsignia/signia-auth-sdk @getsignia/signia-auth-ui-react-native

Setup​

1. Initialize OIDC Client​

Create the OIDC client with your configuration:

src/auth-config.ts
import { OIDCClient } from '@getsignia/signia-auth-sdk';

export const oidcClient = new OIDCClient({
  clientId: 'my-mobile-app-abc123',         // Copy from Signia ID Dashboard
  redirectUri: 'myapp://oidc-callback',
  issuer: 'https://YOUR_TENANT.signiaauth.com',
  scopes: ['openid', 'profile', 'email']
});
Deep Linking

React Native uses deep linking for redirect URIs. Use a custom URL scheme like myapp:// for your app.

2. Configure Deep Linking​

iOS (Info.plist)​

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

Android (AndroidManifest.xml)​

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="myapp" />
</intent-filter>

3. Add Provider​

Wrap your app with SigniaAuthProvider:

App.tsx
import { SigniaAuthProvider } from '@getsignia/signia-auth-ui-react-native';
import { oidcClient } from './auth-config';

export default function App() {
  return (
    <SigniaAuthProvider client={oidcClient}>
      <Navigation />
    </SigniaAuthProvider>
  );
}

Hooks​

useSigniaAuth​

Access authentication state and user information:

import { useSigniaAuth } from '@getsignia/signia-auth-ui-react-native';
import { View, Text, ActivityIndicator } from 'react-native';

function ProfileScreen() {
  const {
    isAuthenticated,
    isLoading,
    user,
    error
  } = useSigniaAuth();

  if (isLoading) return <ActivityIndicator />;
  if (error) return <Text>Error: {error.message}</Text>;
  if (!isAuthenticated) return <Text>Please log in</Text>;

  return (
    <View>
      <Text>Welcome {user?.email}</Text>
      <Text>User ID: {user?.sub}</Text>
    </View>
  );
}

Components​

LoginButton​

Pre-built login button:

import { LoginButton } from '@getsignia/signia-auth-ui-react-native';

function LoginScreen() {
  return (
    <View>
      <LoginButton />
      {/* Or customize: */}
      <LoginButton style={styles.button}>
        Sign In
      </LoginButton>
    </View>
  );
}

LogoutButton​

Pre-built logout button:

import { LogoutButton } from '@getsignia/signia-auth-ui-react-native';

function SettingsScreen() {
  return (
    <View>
      <LogoutButton />
      {/* Or customize: */}
      <LogoutButton style={styles.button}>
        Sign Out
      </LogoutButton>
    </View>
  );
}

ProtectedScreen​

Protect screens that require authentication:

import { ProtectedScreen } from '@getsignia/signia-auth-ui-react-native';

function DashboardScreen() {
  return (
    <ProtectedScreen loadingComponent={<ActivityIndicator />}>
      <View>
        <Text>Protected Content</Text>
      </View>
    </ProtectedScreen>
  );
}

React Navigation​

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useSigniaAuth } from '@getsignia/signia-auth-ui-react-native';

const Stack = createNativeStackNavigator();

function Navigation() {
  const { isAuthenticated, isLoading } = useSigniaAuth();

  if (isLoading) {
    return <LoadingScreen />;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {isAuthenticated ? (
          <>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Profile" component={ProfileScreen} />
          </>
        ) : (
          <Stack.Screen name="Login" component={LoginScreen} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Advanced Usage​

Manual Authentication​

function CustomLoginScreen() {
  const { client } = useSigniaAuth();

  const handleLogin = async () => {
    try {
      await client.login();
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  return (
    <Button title="Login" onPress={handleLogin} />
  );
}

Authenticated API Calls​

import { useEffect, useState } from 'react';

function UserDataScreen() {
  const { client } = useSigniaAuth();
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const httpClient = await client.getAuthHttpClient();
      const response = await httpClient.get('https://api.example.com/user');
      setData(response.data);
    }
    fetchData();
  }, [client]);

  return (
    <View>
      <Text>{JSON.stringify(data)}</Text>
    </View>
  );
}

Biometric Authentication​

Signia supports biometric authentication on mobile devices:

iOS​

  • Face ID
  • Touch ID

Android​

  • Fingerprint
  • Face unlock

No additional configuration needed - the WebAuthn/Passkey flow automatically uses platform biometrics.

Platform-Specific Considerations​

iOS​

  • Minimum iOS version: 14.0+
  • WebAuthn support: Native via ASWebAuthenticationSession
  • Keychain: Credentials stored securely in iOS Keychain

Android​

  • Minimum Android version: API 23+ (Android 6.0)
  • WebAuthn support: Chrome Custom Tabs
  • Keystore: Credentials stored in Android Keystore

Troubleshooting​

"Unable to open URL" error​

Make sure your deep linking scheme is properly configured in both iOS and Android manifest files.

// Check your redirectUri matches your scheme
redirectUri: 'myapp://oidc-callback'  // ✅
redirectUri: 'http://localhost/callback'  // ❌ Won't work on device

Login window doesn't close​

Ensure you're handling the deep link callback properly:

import { Linking } from 'react-native';

// This is handled automatically by SigniaAuthProvider
// But if you need manual handling:
useEffect(() => {
  const handleUrl = ({ url }: { url: string }) => {
    // Process callback URL
  };

  Linking.addEventListener('url', handleUrl);
  return () => Linking.removeEventListener('url', handleUrl);
}, []);

Biometric authentication not working​

Check that you have the necessary permissions:

iOS (Info.plist):

<key>NSFaceIDUsageDescription</key>
<string>We use Face ID to securely authenticate you</string>

Android (AndroidManifest.xml):

<uses-permission android:name="android.permission.USE_BIOMETRIC" />

Examples​

Complete Example​

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { OIDCClient } from '@getsignia/signia-auth-sdk';
import {
  SigniaAuthProvider,
  useSigniaAuth,
  LoginButton,
  LogoutButton
} from '@getsignia/signia-auth-ui-react-native';

const oidcClient = new OIDCClient({
  clientId: 'my-mobile-app-abc123',         // Copy from Signia ID Dashboard
  redirectUri: 'myapp://oidc-callback',
  issuer: 'https://YOUR_TENANT.signiaauth.com',
  scopes: ['openid', 'profile', 'email']
});

const Stack = createNativeStackNavigator();

function HomeScreen() {
  const { user } = useSigniaAuth();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome {user?.name}</Text>
      <Text>Email: {user?.email}</Text>
      <LogoutButton />
    </View>
  );
}

function LoginScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Please Log In</Text>
      <LoginButton />
    </View>
  );
}

function Navigation() {
  const { isAuthenticated, isLoading } = useSigniaAuth();

  if (isLoading) {
    return (
      <View style={styles.container}>
        <Text>Loading...</Text>
      </View>
    );
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {isAuthenticated ? (
          <Stack.Screen name="Home" component={HomeScreen} />
        ) : (
          <Stack.Screen name="Login" component={LoginScreen} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <SigniaAuthProvider client={oidcClient}>
      <Navigation />
    </SigniaAuthProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  }
});

Next Steps​