I am trying to log into a Pixelfed instance, using the expo-auth-session package. I get as far as the pop-up with the code showing after I authorized my app in the pop-up. However, the promise never gets fulfilled. If I close the window, I get to the Dismiss part of the promise, but that was it.

import React, { useState, useEffect } from 'react';
import { View, ActivityIndicator, Platform, Button } from 'react-native';
import { WebView } from 'react-native-webview';
import * as WebBrowser from 'expo-web-browser';
import * as AuthSession from 'expo-auth-session';
import * as Linking from "expo-linking"

export default function OAuthLoginScreen({ route, navigation }) {
  const [syncRunning, setSyncRunning] = useState(false);
  
  const { 
    serverUrl, 
    authUrl, 
    tokenUrl, 
    tmpRedirectUri, 
    clientId, 
    scopes, 
    handleAuth 
  } = route.params;

  const discovery = {
    authorizationEndpoint: authUrl,
    tokenEndpoint: tokenUrl
  };

  if(tmpRedirectUri === undefined || tmpRedirectUri === null){
    redirectUri = AuthSession.makeRedirectUri({
      scheme: 'myapp',
    });
  } else {
    redirectUri = tmpRedirectUri;
  }

  const options = {
    clientId: clientId,
    redirectUri: redirectUri,
    scopes: scopes
  };

  const [request, response, promptAsync] = AuthSession.useAuthRequest(
    options,
    discovery
  );

  if(request && !syncRunning){
    setSyncRunning(true)
    promptAsync()
  }

  useEffect(() => {
    if (response?.type === 'success') {
      const { code } = response.params;
      handleAuth(serverUrl, result.url, navigation);
    }
  }, [response]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  );

}

I had the same issue, when I tried to implement it with the expo-web-browser package as well. One issue I believe is that Pixelfed requires urn:ietf:wg:oauth:2.0:oob as value for the redirect uri. Otherwise an Invalid Client error will be shown. Hence, the dance with the tmpRedirectUri as Instagram works with the right uri.

Is it true that a HTTPS development server is needed? If true, how can this be achieved using the metro bundler? The --https flag does not open a https session. I don't want to go back to webpack, as it seems to be deprecated. I also tried with ǹgrok, which allows for https, but this did not work either.

When the same code is used with the Instagram oauth login flow, it works just as it should.