[Suggestion] New cookie-based persistence supported by Firebase

[MartinXPN]

Looks like the Firebase team added a new cookie based persistence method: https://firebase.google.com/support/release-notes/js#authentication

Added Persistence.COOKIE, a new persistence method backed by cookies. The browserCookiePersistence implementation is designed to be used in conjunction with middleware that ensures both your front and backend authentication state remain synchronized.

Is this helpful in simplifying the persistence logic for this library?

[awinogrodzki]

Hey @MartinXPN!

Thanks for letting me know! It definitely could be useful and would allow to drop a lot of cookie logic within the library.
However, the documentation is very limited. I tried it, and it seems there are issues when importing browserCookiePersistence from latest firebase library version (11.6.0). I will keep an eye on this one!

[MartinXPN]

@awinogrodzki I was looking at the docs for using Firebase client SDK in SSR apps: https://firebase.google.com/docs/web/ssr-apps
Looks like they're using a user token authIdToken. Do we have access to that? Or is the token generated by next-firebase-auth-edge different?

[awinogrodzki]

Hey @MartinXPN,

Great question – next-firebase-auth-edge's token is server-side generated ID Token and it is compatible with FirebaseServerApp. Here's the code I tested in starter example:

async function getFirebaseServerAppAndAuth() {
  const tokens = await getTokens(await cookies(), authConfig);

  const serverApp = initializeServerApp(clientConfig, { authIdToken: tokens?.token ?? '' })
  const serverAuth = getAuth(serverApp);

  return {serverApp, serverAuth}
} 

export default async function Profile() {
  const count = await getUserCounter();
  const {serverAuth} = await getFirebaseServerAppAndAuth();

  serverAuth.onAuthStateChanged(user => console.log({user}))

  return (
    <div className={styles.container}>
      <MainTitle>
        <HomeLink />
        <span>Profile</span>
        <Badge>Rendered on server</Badge>
      </MainTitle>
      <UserProfile count={count} incrementCounter={incrementCounter} />
    </div>
  );
}

Note that we're passing tokens.token as authIdToken to initializeServerApp

[MartinXPN]

Oh, that's great, thanks so much for clarifying!

[MartinXPN]

@awinogrodzki, there is something weird happening when I try to access any Firebase document like you suggested:

  const tokens = await getTokens(await cookies(), authConfig);
  const serverApp = initializeServerApp(clientConfig, { authIdToken: tokens?.token })

Looks like Firestore Rules treat the document read request as if the user is unauthenticated, causing permission denied errors. Do you think this might be caused by some differences in how the JWT tokens are generated?

[awinogrodzki]

@MartinXPN, this is the initializeServerApp implementation for UserProfile page in starter example:
https://github.com/awinogrodzki/next-firebase-auth-edge/pull/342/files

It works as expected

Firestore configuration

The structure of user-counters Firestore table is pretty simple: { [userId: string]: {id: string, count: number} }

And here are the rules I've used:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    
    // Rules for user-counters collection
    match /user-counters/{userId} {
      // Allow read only if the user is authenticated and accessing their own document
      allow read: if request.auth != null && request.auth.uid == userId;
      
      // Allow create only if the user is authenticated and creating their own document
      allow create: if request.auth != null 
        && request.auth.uid == userId
        && request.resource.data.keys().hasAll(['id', 'count'])
        && request.resource.data.id is string
        && request.resource.data.id == userId
        && request.resource.data.count is number;
      
      // Allow update only if the user is authenticated and updating their own document
      allow update: if request.auth != null 
        && request.auth.uid == userId
        && request.resource.data.keys().hasAll(['id', 'count'])
        && request.resource.data.id is string
        && request.resource.data.id == userId
        && request.resource.data.count is number;
      
      // Allow delete only if the user is authenticated and deleting their own document
      allow delete: if request.auth != null && request.auth.uid == userId;
    }
  }
}

I was getting FirebaseError: Missing or insufficient permissions. but I was able to fix it by calling this before accessing DB:

  const auth = getAuth(app);

  await auth.authStateReady();

Could you confirm that you're using auth.authStateReady?

[MartinXPN]

Just tried doing it like you suggested:

const app = initializeServerApp(firebaseConfig, {authIdToken: userToken});
const auth = getAuth(app);
await auth.authStateReady();
const firestore = initializeFirestore(app, {ignoreUndefinedProperties: true});

Everything worked perfectly! Thanks a lot!