Configuring React Native apps for the Device Authorization Grant

cd ios && pod install

import { createOidcDeviceClient } from '@ping-identity/rn-oidc';

const deviceClient = createOidcDeviceClient({
    clientId: '6c7eb89a-66e9-ab12-cd34-eeaf795650b2',
    discoveryEndpoint: 'https://auth.pingone.com/3072206d-c6ce-ch15-m0nd-f87e972c7cc3/as/.well-known/openid-configuration',
    redirectUri: 'org.forgerock.oidc://oauth2redirect',
    scopes: ['openid', 'email', 'address', 'profile'],
});

const stop = await deviceClient.authorize((status) => {
    if (status.type === 'started') {
        const userCode = status.response.userCode;
        const verificationUri = status.response.verificationUri;
        const verificationUriComplete = status.response.verificationUriComplete;
        // Display userCode and verificationUri in your UI.
        // Optionally, generate a QR code from verificationUriComplete.
    }
});

const stop = await deviceClient.authorize((status) => {
    switch (status.type) {
        case 'started':
            // Display codes
            break;
        case 'polling':
            // Optional: update a progress indicator
            // status.pollCount, status.pollInterval, status.nextPollAt
            break;
        case 'success':
            // Authentication complete — tokens saved!
            break;
    }
});

const user = await deviceClient.user();

if (user) {
    const tokens = await user.token();      // Access, ID, and refresh tokens
    const profile = await user.userinfo();  // Claims from the userinfo endpoint
}

const stop = await deviceClient.authorize((status) => {
    switch (status.type) {
        case 'started':
            // Display codes
            break;
        case 'polling':
            // Optional: update a progress indicator
            break;
        case 'success':
            // Authentication complete — tokens saved!
            break;
        case 'expired':
            // The device code has expired — restart the flow
            break;
        case 'accessDenied':
            // The user denied the request
            break;
        case 'failure':
            // Handle unexpected errors: status.error.message
            break;
    }
});

import { DeviceAuthGrantProvider } from '@ping-identity/rn-oidc';

function App() {
    return (
        <DeviceAuthGrantProvider client={deviceClient}>
            <DeviceAuthorizationScreen />
        </DeviceAuthGrantProvider>
    );
}

import { useDeviceAuthGrant } from '@ping-identity/rn-oidc';

function DeviceAuthorizationScreen() {
    const [
        { status, authorizationResponse, isFlowActive, isLoading, isAuthenticated },
        actions,
    ] = useDeviceAuthGrant();

    // Render your UI from status and authorizationResponse,
    // and call actions such as authorize() from your event handlers.
}