1.0.0 • Published 6 months ago
identity-react-native v1.0.0
Reclaim Identity for React Native
React Native authentication package for Reclaim Protocol. Handles OAuth 2.0, token management and user data.
Install
npm install identity-react-native
Usage
Basic Setup
import getReclaimAuth from 'identity-react-native';
const auth = getReclaimAuth(
'your-client-id',
'your-client-secret',
'yourapp://callback'
);
Component Example
import React, { useState, useEffect } from 'react';
import { View, Button } from 'react-native';
import getReclaimAuth from 'identity-react-native';
const auth = getReclaimAuth(
'your-client-id',
'your-client-secret',
'yourapp://callback'
);
export default function AuthScreen() {
const [user, setUser] = useState(auth.getCurrentUser());
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(setUser);
return unsubscribe;
}, []);
const handleSignIn = async () => {
try {
const currentUser = await auth.signIn();
console.log('User:', currentUser);
} catch (e) {
console.error('Sign in error:', e);
}
};
const handleSignOut = async () => {
try {
await auth.signOut();
} catch (err) {
console.error('Sign out error:', err);
}
};
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>User ID: {user ? JSON.stringify(user.id) : 'Not Signed In'}</Text>
<Text>User Data: {user ? JSON.stringify(user.userData) : 'Not Signed In'}</Text>
{!user && <Button title="Sign In" onPress={handleSignIn} /> }
{user && <Button title="Sign Out" onPress={handleSignOut} /> }
</View>
);
}
Custom Hook
import { useState, useEffect } from 'react';
import getReclaimAuth from 'identity-react-native';
export function useReclaimAuth() {
const [user, setUser] = useState(null);
const auth = getReclaimAuth(clientId, clientSecret, redirectUri);
useEffect(() => {
return auth.onAuthStateChanged(setUser);
}, []);
return {
user,
signIn: () => auth.signIn(),
signOut: () => auth.signOut(),
getCurrentUser: () => auth.getCurrentUser()
};
}
API
Methods
signIn(): Promise<ReclaimUser>
signOut(): Promise<void>
getCurrentUser(): ReclaimUser | null
onAuthStateChanged(callback: (user: ReclaimUser | null) => void): () => void
Types
interface ReclaimUser {
id: string;
userData: { [key: string]: string };
additionalData: { [key: string]: string }[];
}
Requirements
- React Native 0.64.0+
- expo-web-browser
- expo-file-system
- Configured deep linking
Config
Required:
clientId
: Reclaim Protocol app IDclientSecret
: Reclaim Protocol app secretredirectUri
: Deep link URI (e.g.myapp://callback
)
Security
- State validation for CSRF protection
- Secure token storage
- In-app browser auth flow
1.0.0
6 months ago