How to handle Auth with WebBrowser.openAuthSessionAsync?

[rafaelrcamargo]

I created a auth flow using WebBrowser.openAuthSessionAsync, the opening and the closing are working as expected but my problem comes with the return, I only receive back from the browser: {"type": "success", "url": "exp://192.168.0.11:19000/--/App"}, the type and my return URL.

I'm trying to figure out how to have access to any kind of info from the return, from cookies to query string on the URL as I have control over how my API handles the return, but I'm not being able to access any kind of info from the AuthSession.

Here is the implementation:

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

export default () => {
  const [result, setResult] =
    useState<WebBrowser.WebBrowserAuthSessionResult | null>(null)

  useEffect(() => {
    console.log(result)
  }, [result])

  const _handlePressButtonAsync = async () => {
    const baseUrl = "https://...com"
    const callbackUrl = Linking.createURL("App", { scheme: "myapp" })

    setResult(
      await WebBrowser.openAuthSessionAsync(
        `${baseUrl}/login?returnUrl=${encodeURIComponent(
          `${baseUrl}/_v/login?token=...&iv=...&returnUrl=${callbackUrl}`
        )}`,
        callbackUrl
      )
    )
  }

  return (
    <View className="items-center justify-center flex-1">
      <Button title="Open Auth Session" onPress={_handlePressButtonAsync} />
      {result && <Text>{JSON.stringify(result)}</Text>}
    </View>
  )
}

It's a SASS platform, that does not follow only the OAuth flow, which made me choose this method over https://docs.expo.dev/versions/latest/sdk/auth-session/

[rafaelrcamargo]

Helped me through, despite not being the same problem the use the URL quote helped me solve this by changing a bit how I thought about it!

The final result became a little too big to paste here, but the handling ended up being relatively straightforward:

  useEffect(() => {
    if (result?.type === "success") {
      const { token, iv } = getParamsFromUrl(result.url)

      const session = decrypt(token, key, iv)
      console.log({ session })
    }
  }, [result])

[jgatto1]

thank you guys this works pretty well for me too!