How to persist Apple authentication?

[Chippd]

I've successfully implemented sign in with Google and Apple using the pseudo code below.
When the user signs in, I'm saving the details to storage and reauthenticating on next app launch by retrieving the token from storage.
This works for Google, but when trying to do the same flow for Apple, I receive a "missing-or-invalid-nonce" error.

Signing in with Google

// auth with Google
const result = await FirebaseAuthentication.signInWithGoogle();

// store the token in storage for use on next app launch
let storeResult = setStorageItem('authToken-Google',result.credential?.idToken)

// Generate a credential
const credential = GoogleAuthProvider.credential(result.credential?.idToken);

// get user result from credential sign in
let { user } = await signInWithCredential($auth, credential);

// user is successfully signed in

Signing in with Apple

const result = await FirebaseAuthentication.signInWithApple();

await setStorageItem('authToken-Apple', {
  'idToken': result.credential?.idToken,
  'rawNonce': result.credential?.nonce
})

const provider = new OAuthProvider('apple.com');
const credential = provider.credential({
  idToken: result.credential?.idToken,
  rawNonce: result.credential?.nonce,
});

await signInWithCredential($auth, credential);
// user is successfully signed in

On next app launch, user would usually be signed out, but can be re-authenticated using token from storage.

This works for Google, but not for Apple, due to a nonce error...

// GOOGLE
// on app launch, retrieve token from storage
let googleToken = await getStorageItem('authToken-Google')
const credential = GoogleAuthProvider.credential(googleToken);
await signInWithCredential($auth, credential);

// user is signed in via Google successfully. 

// APPLE (doesn't work)
let appleToken = await getStorageItem('authToken-Apple')

const provider = new OAuthProvider('apple.com');
const credential = provider.credential({
  idToken: appleToken.idToken,
  rawNonce: appleToken.rawNonce,
});
await signInWithCredential($auth, credential);
ERROR: auth/missing-or-invalid-nonce

1. I can see via logs that the nonce exists, I'm retrieving the token and nonce successfully
2. Am I doing something fundamentally wrong here? Is there an easier/better way?
3. Can I re-use the nonce again or do I somehow have to re-generate it?

Thank you

[robingenz]

Hey @Chippd,
I guess you want the user to be logged in even after an app restart.
Firebase Authentication does this for you. You just have to configure it accordingly.
The problem only occurs when using the Firebase JS SDK on iOS. Here you can find a workaround: https://harryherskowitz.com/2021/08/23/firebase-capacitor.html

Let me know if that doesn't help you!

[hellokingdom]

@robingenz thanks for the quick update / confirmation. That confirms our experience too. We have an app using the JS SDK and whilst we've yet to see any significant issues with the persistence being cleared we have a few customers that have commented on the app asking them to login more than once.

[robingenz]

@hellokingdom For what reason do you use the Firebase JS SDK in addition to this plugin on Android/iOS?
I know there are many reasons, as not all Capacitor Firebase plugins are available yet etc., but what is the specific reason in your case?

[hellokingdom]

@robingenz We don't currently use this native auth plugin. We are using the JS SDK directly for auth calling a customer cloud function / auth provider (https://firebase.google.com/docs/auth/web/custom-auth) and calling cloud functions with app check and the auth context enabled.

That is the bulk of our app's behaviour, do you think this will be possible using the fully native route within the plugins you are working on?

A native implementation where we can authenticate natively to each platform, enable app check and then call callable cloud functions returning data to our JS layer (via React Query?) would be great.

[robingenz]

@hellokingdom Okay, there is no Cloud Functions plugin yet, so unfortunately it is not possible. But thanks for the insights. That always helps me to prioritize.

[hellokingdom]

@robingenz Thanks for the work you are doing here. We'll keep an eye and maybe could support in future if required.