Question about examples/next13-typescript-static-pages and anonymous login

[mxswat]

I'm pretty new to Firebase, and I'm using your example examples/next13-typescript-static-pages as a base for my project.

And I'm wondering, as an app dev, do I need to use anonymous logins? In your example, I must use the anonymous login. As I mentioned in the PR about the app readme: https://github.com/awinogrodzki/next-firebase-auth-edge/pull/53

But I don't see any use case for my app to allow anonymous logins since only logged-in users can make changes on the DB.

Take, as an example, an e-commerce app. The not-logged-in user can still navigate it but only add items to the cart or pay if logging in.

This also makes me wonder if I should have used as a base for my project the next13-typescript-firebaseui or the next13-typescript-simple instead of the static pages one.

[Enalmada]

I assumed the example was made to just show off how anonymous login could be used. However this makes it a bit harder for users that don't want anonymous to get started. I am also in the process of trying to figure out how to disable anonymous login without breaking anything.

It would be ideal if the examples could have anonymous support configured with some flag so new users that don't know anything about firebase but don't want anonymous could ramp up quicker.

[awinogrodzki]

Hey @mxswat!

@Enalmada is right. I used anonymous login as an example.

Although it can be quite useful to have anonymous login in e-commerce app (merging user baskets, sharing behaviour analytics), most apps won't actually need this.

Initially, the idea for next13-typescript-static-pages was to show off all of the Firebase functions, but it definitely does not help for people starting with new projects.

Also, I am aware of some concepts in examples that are creating a lot of confusion. Eg. async-imported firebase methods or tenant/user naming inconsistencies.

That being said, I am currently working on completely reworking the examples. All existing examples will be removed and replaced by four use-case-focused ones:

• simple – acting as a boilerplate for most of the projects
• advanced – showing of a lot of integrations, running on https://next-firebase-auth-edge-static-demo.vercel.app/
• simple with emulator
• simple with firebase-ui

All of the examples will feature registering/login with password as well as single external provider (Google)

I will let you know when it's ready :-)

[mxswat]

Amazing, thank you!

[awinogrodzki]

Hey @mxswat,

You can take a look at latest next13-typescript-starter example. It's much simpler, features email/password sign in, password reset and no anonymous login :-) https://github.com/awinogrodzki/next-firebase-auth-edge#example

[mxswat]

I will take a look once I'm back home, and thank you very much for improving the examples. I really appreciate it.

[andreemic]

@awinogrodzki In my application there's an area which is only available to non-anonymous users. How can I check if a user is anonymous in the middleware.ts to then redirect anonymous users to the login page and let non-anonymous users through?

[awinogrodzki]

Hey @andreemic,

This is a very good question. To answer this you can look at the structure of DecodedIdToken of non-anonymous vs anonymous user. Here's my example:

Non-anonymous:

{
  "someCustomClaim": {
    "updatedAt": 1690907115710
  },
  "iss": "https://securetoken.google.com/ensite-dev",
  "aud": "ensite-dev",
  "auth_time": 1690907504,
  "user_id": "y2ZndcfxcGgRM9LM7FGIst5V9eo1",
  "sub": "y2ZndcfxcGgRM9LM7FGIst5V9eo1",
  "iat": 1690965430,
  "exp": 1690969030,
  "email": "amadeusz.winogrodzki@icloud.com",
  "email_verified": true,
  "firebase": {
    "identities": {
      "email": [
        "amadeusz.winogrodzki@icloud.com"
      ]
    },
    "sign_in_provider": "custom"
  },
  "uid": "y2ZndcfxcGgRM9LM7FGIst5V9eo1"
}

Anonymous:

{
  "iss": "https://securetoken.google.com/ensite-dev",
  "aud": "ensite-dev",
  "auth_time": 1690965723,
  "user_id": "Wh5uTQ5jnbhy0G86xWWyBRI1T9M2",
  "sub": "Wh5uTQ5jnbhy0G86xWWyBRI1T9M2",
  "iat": 1690965723,
  "exp": 1690969323,
  "firebase": {
    "identities": {},
    "sign_in_provider": "custom"
  },
  "uid": "Wh5uTQ5jnbhy0G86xWWyBRI1T9M2"
}

You can notice that anonymous user tokens are missing email property, which makes a lot of sense.

You can do something as such:

    handleValidToken: async ({ token, decodedToken }) => {
      const isAnonymous = !decodedToken.email;

      if (isAnonymous && RESTRICTED_PATHS.includes(request.nextUrl.pathname)) {
          // Do desired redirect here
      }

      return NextResponse.next();
    },