Same-Device Flow

HTTP/1.1 302 Found
Location: http://localhost:8080/?response_type=vp_token&response_mode=direct_post&client_id=did:key:z6MkigCEnopwujz8Ten2dzq91nvMjqbKQYcifuZhqBsEkH7g&redirect_uri=http://verifier-one.batterypass.fiware.dev/api/v1/authentication_response&state=OUBlw8wlCZZOcTwRN2wURA&nonce=wqtpm60Jwx1sYWITRRZwBw

HTTP/1.1 302 Found
Location: http://localhost:8080/?state=274e7465-cc9d-4cad-b75f-190db927e56a&code=IwMTgvY3JlZGVudGlhbHMv

{
  "token_type": "Bearer",
  "expires_in": 3600,
  "access_token": "eyJhbGciOiJFUzI1NiIsImtpZCI6IldPSEZ1NEhaNTlTTTg1M0M3ZU4wT3ZsS0dyTWVlckRDcEhPVVJvVFF3SHciLCJ0eXAiOiJKV1QifQ..."
}

import React, { useState, useEffect } from 'react';
import { View, Button, Linking, Alert } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

function SameDeviceAuth() {
  const [authState, setAuthState] = useState(null);
  const VERIFIER_URL = 'https://verifier.example.com';
  
  useEffect(() => {
    // Handle deep link when returning from wallet
    const handleDeepLink = async (event) => {
      const url = event.url;
      const params = new URLSearchParams(url.split('?')[1]);
      const code = params.get('code');
      const state = params.get('state');
      
      if (code && state === authState) {
        await exchangeCodeForToken(code);
      }
    };
    
    // Listen for deep links
    const subscription = Linking.addEventListener('url', handleDeepLink);
    
    return () => subscription.remove();
  }, [authState]);
  
  const startAuthentication = async () => {
    try {
      // Generate unique state
      const state = generateUUID();
      setAuthState(state);
      await AsyncStorage.setItem('auth_state', state);
      
      // Call samedevice endpoint
      const response = await fetch(
        `${VERIFIER_URL}/api/v1/samedevice?state=${state}`,
        { redirect: 'manual' }
      );
      
      // Get redirect location
      const redirectUrl = response.headers.get('location');
      
      // Open wallet app
      const canOpen = await Linking.canOpenURL(redirectUrl);
      if (canOpen) {
        await Linking.openURL(redirectUrl);
      } else {
        Alert.alert('Error', 'Cannot open wallet app');
      }
    } catch (error) {
      Alert.alert('Error', 'Failed to start authentication');
    }
  };
  
  const exchangeCodeForToken = async (code) => {
    try {
      const params = new URLSearchParams({
        grant_type: 'authorization_code',
        code: code,
        redirect_uri: 'myapp://auth/callback'
      });
      
      const response = await fetch(`${VERIFIER_URL}/token`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: params.toString()
      });
      
      const data = await response.json();
      
      // Store token
      await AsyncStorage.setItem('access_token', data.access_token);
      await AsyncStorage.removeItem('auth_state');
      
      Alert.alert('Success', 'Authentication successful!');
      
      // Navigate to home screen
      // navigation.navigate('Home');
    } catch (error) {
      Alert.alert('Error', 'Token exchange failed');
    }
  };
  
  const generateUUID = () => {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
      const r = Math.random() * 16 | 0;
      const v = c === 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  };
  
  return (
    <View style={{ padding: 20 }}>
      <Button 
        title="Login with Wallet" 
        onPress={startAuthentication}
      />
    </View>
  );
}

export default SameDeviceAuth;