Using NextJs + NextAuth backend to auth an Expo / React Native iOS app

[coudron]

Summary

I'm looking to have an iOS app (built with Expo / React Native) use a NextJS + NextAuth backend, but I'm struggling to get it working.

Are there examples of this working?

My primary hurdle here is that when I set a redirect URL to call back into my iOS app, NextAuth throws a INVALID_CALLBACK_URL_ERROR. After reviewing the NextAuth source, it appears it has to be a HTTP/HTTPS url only. Native app URLs are not supported.

Any help is appreciated 🙏

Additional information

import React, { useEffect, useState } from "react";
import { Button, Text, View, StyleSheet, Linking } from "react-native";
import * as WebBrowser from "expo-web-browser";

export default function SignIn() {
  const [result, setResult] = useState<any>(null);

  const _handlePressButtonAsync = async () => {
    let result = await WebBrowser.openAuthSessionAsync(
      "http://localhost:3000/api/auth/signin?callback=myapp://auth"
    );
    setResult(result);
  };

  const handleOpenURL = (event: { url: string }) => {
    console.log(event.url);
    WebBrowser.dismissBrowser();
    // TODO Save the credentials here from the url?
  };

  useEffect(() => {
    // Add event listener on mount
    const unsubscribe = Linking.addEventListener("url", handleOpenURL);

    // Clean up on unmount
    return () => {
      unsubscribe.remove();
    };
  }, []);

  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Button title="Open WebBrowser" onPress={_handlePressButtonAsync} />
      <Text>{result && JSON.stringify(result)}</Text>
    </View>
  );
}

Example

No response

[ricopinazo]

I'm also trying to figure out a way of doing this. Didn't try it yet but I maybe using the package expo-auth-session helps somehow?

[ScreamZ]

@coudron Did you succeed ? I'm stuck with expo auth session and pkRE checks >-<