Supabase•4mo ago

Supabase Auth with Apple Oauth and Expo -> React Native

Hello, was wondering if anyone has implemented Apple auth with supabase auth and react native using expo. I keep getting this error ERROR Error signing in with Apple: The authorization attempt failed for an unknown reason People have asked me to use a physical device, which I am and I've also made sure my app id on apple and bundle id on react native's app.json match. I ruby code I found on a github to generate my secret key.

12 Replies

codeOP•4mo ago

import { Platform } from 'react-native'
import * as AppleAuthentication from 'expo-apple-authentication'
import { supabase } from 'app/utils/supabase'

export function Auth() {
  if (Platform.OS === 'ios')
    return (
      <AppleAuthentication.AppleAuthenticationButton
        buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
        buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
        cornerRadius={5}
        style={{ width: 200, height: 64 }}
        onPress={async () => {
          try {
            const credential = await AppleAuthentication.signInAsync({
              requestedScopes: [
                AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
                AppleAuthentication.AppleAuthenticationScope.EMAIL,
              ],
            })
            // Sign in via Supabase Auth.
            if (credential.identityToken) {
              const {
                error,
                data: { user },
              } = await supabase.auth.signInWithIdToken({
                provider: 'apple',
                token: credential.identityToken,
              })
              console.log(JSON.stringify({ error, user }, null, 2))
              if (!error) {
                // User is signed in.
              }
            } else {
              throw new Error('No identityToken.')
            }
          } catch (e) {
            if (e.code === 'ERR_REQUEST_CANCELED') {
              // handle that the user canceled the sign-in flow
            } else {
              // handle other errors
            }
          }
        }}
      />
    )
  return <>{/* Implement Android Auth options. */}</>
}

import { Platform } from 'react-native'
import * as AppleAuthentication from 'expo-apple-authentication'
import { supabase } from 'app/utils/supabase'

export function Auth() {
  if (Platform.OS === 'ios')
    return (
      <AppleAuthentication.AppleAuthenticationButton
        buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
        buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
        cornerRadius={5}
        style={{ width: 200, height: 64 }}
        onPress={async () => {
          try {
            const credential = await AppleAuthentication.signInAsync({
              requestedScopes: [
                AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
                AppleAuthentication.AppleAuthenticationScope.EMAIL,
              ],
            })
            // Sign in via Supabase Auth.
            if (credential.identityToken) {
              const {
                error,
                data: { user },
              } = await supabase.auth.signInWithIdToken({
                provider: 'apple',
                token: credential.identityToken,
              })
              console.log(JSON.stringify({ error, user }, null, 2))
              if (!error) {
                // User is signed in.
              }
            } else {
              throw new Error('No identityToken.')
            }
          } catch (e) {
            if (e.code === 'ERR_REQUEST_CANCELED') {
              // handle that the user canceled the sign-in flow
            } else {
              // handle other errors
            }
          }
        }}
      />
    )
  return <>{/* Implement Android Auth options. */}</>
}

This is the code right from the docs. I've tried console.logging at this exact snippet (right after it) const credential = await AppleAuthentication.signInAsync({ requestedScopes: [ AppleAuthentication.AppleAuthenticationScope.FULL_NAME, AppleAuthentication.AppleAuthenticationScope.EMAIL, ], }) And it doesnt print anything so it seems its failing on this function call? Although I cannot be a 100% sure

Strange•4mo ago

hey! i have a working native sign in with apple implementation with supabase and expo, one sec to pull up my code

Strange•4mo ago

first of all this is my full SignInWithApple button that i use. it has a few things specific to my code but you should be able to parse out what matches with your use case

SignInWithApple.tsx

Strange•4mo ago

and then in my supabase config.toml file when doing local development

[auth.external.apple]
enabled = true
client_id = "<your app package id>" # like "com.example.app"
# DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
secret = "0xDEADBEEF" # STUB
# Overrides the default auth redirectUrl.
redirect_uri = ""
# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
# or any other third-party OIDC providers.
url = ""

[auth.external.apple]
enabled = true
client_id = "<your app package id>" # like "com.example.app"
# DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
secret = "0xDEADBEEF" # STUB
# Overrides the default auth redirectUrl.
redirect_uri = ""
# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
# or any other third-party OIDC providers.
url = ""

the secret value comes from the apple developer dashboard i believe, but I'm not building for web so this can be any value for me so long as there is a value but in the production dashboard, enable Sign In with Apple and set the client ID to your app package name again (com.example.app etc etc) that was all that was required for me :ThinkShrug:

codeOP•4mo ago

Oh did you not need a service id? Thanks a lot this really helps :) i dont think I have this, do you think that might be the issue?

Strange•4mo ago

i assume not since i dont know what this is actually

codeOP•4mo ago

Oh interesting. I assumed it was required So you generate an apple key without a service ID? Is that right? And then you generate the client secret Our code seems more or less the same, im just very confused about the setup, and what keys/variables go where in supabase

Strange•4mo ago

er. that part i cant remember. i did whatever the guide told me to do- whether that was generating with the key or without i don't know have you tried just following my steps? you need to enable the sign in with apple entitlement in the apple developer console for your app first, if you havent done that already

codeOP•4mo ago

Yeah :/ Yeah I have For some reason it works on expo go but doesn't work on my actual app build? It's such a weird, niche error I think it could be a bundle id mismatch but I dont really see it I fixed it! It was the supabase.toml file. I didn't have one Thank you so much I really appreciate it. This took really long to debug honestly 2+ days so thanks a lot!!!

flo_oskr•3mo ago

you also managed to get it work for ios rn expo app?

Strange•3mo ago

yep

flo_oskr•3mo ago

would appreciate if you can help me out, also trying to solve it for longer, i have the button and can click it , but unknown error like above , sign in is activated in apple and supabase (no oauth jwt due to app ) dev build and on device , will try again the code above no oauth , no service id needed as i understand

Gaming

Programming

Supabase Auth with Apple Oauth and Expo -> React Native

Did you find this page helpful?