Expo Electron OAuth2 Login

Question

I'm trying to built an app using Expo for multiple different Platforms, Desktop included - with Electron. Now I'm having issues continuing a logging process till the end.

I'm aware Electron uses Expo React Native Web Features, but I don't understand how to do continue the logging process after the redirection.

This is what I've tried:

const useProxy = Platform.OS !== 'web';

export function AuthScreen() {
const {nextState} = useAuth();

    const discovery = AuthSession.useAutoDiscovery('https://my-open-id.url');

    const redirectUri = AuthSession.makeRedirectUri({
        useProxy,
    });

    // Create and load an auth request
    const [request, , promptAsync] = AuthSession.useAuthRequest(
        {
            clientId: 'client-id',
            clientSecret: 'client-secret',
            redirectUri,
            scopes: ['openid', 'profile', 'email', 'offline_access'],
        },
        discovery
    );

    const login = useCallback(async () => {
        const result = await promptAsync({useProxy});
        console.log({result});

        if (!result) {
            return;
        }

        switch (result.type) {
            case "cancel":
            case "dismiss":
                return;
            case "error":
                return;
            case "locked":
                return;
            case "success":
                const token = result.authentication;
                nextState(token);
                return;
        }
    }, [promptAsync]);

    if (Platform.OS !== 'web') {
        useEffect(() => {
            WebBrowser.warmUpAsync();
            return () => {
                WebBrowser.coolDownAsync();
            }
        }, []);
    }

    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Auth Screen</Text>
            <Button title="Login!" disabled={!request} onPress={login}/>
        </View>
    );
}

Whenever I click on the Login button, I'm being redirected to my OAuth2 server and I can log in. After that, I'm supposed to be redirected into my app, but no.

After the login process, the new window remains and another instance of the application continues there.

I'm looking also for electron features to know how to hack it sufficiently so have a fully working flow, but I still don't know how to access electron's main process from the react native part of the code.

Any help would be appreciated.

Answer 1

Expo is using a Private URI Scheme to listen for the login resonse, so first ensure that you have registered it correctly according to the docs.

RECEIVING DEEP LINKS

Once you know your your app's scheme, an easy way to test it is via commands like this, depending whether running on Mac or Windows:

open x-mycompany-desktopapp:/somepath
start x-mycompany-desktopapp:/somepath

I would make sure login happens in the system browser, as recommended in RFC8252. Avoid logins on React Native windows.

In the browser you should see prompts to return the login response to the app. There are some screenshots in this blog post of mine for a plain Electron OAuth secured app.

ELECTRON MULTI INSTANCE LOGIC

My Electron OAuth desktop code sample uses a Private URI Scheme and deals with the multi instance issue you mention - see this code and the use of requestSingleInstanceLock.

Hopefully these notes give you some clues and possible actions. When I was developing this, a big landmark was being able to capture log statements from my main.ts source file!

OAuth is tricky to implement in UIs and sometimes higher level technologies such as Expo can give you very little visibility.