ANONYMOUS USER PROVIDER IS NOT WORKING IN FIREBASE UI

[GarvGupta20]

[REQUIRED] Describe your environment
Operating System version: all
Browser version: all
Firebase UI version: 6.1.0
Firebase SDK version: 10.7.1_

[REQUIRED] Describe the problem
When i add firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID in the the firebaseui config then it doesn't work and shows fn anonymouslySignInUser() is not a function

Steps to reproduce:
Relevant Code:

const uiConfig = {
  signInSuccessURL: "http://localhost:3000/notdone",
  callbacks: {
    signInSuccessWithAuthResult: function (authResult) {
      console.log(authResult);
      Navigate("/notdone");
      return false;
    },
    signInFailure: function (error) {
      //error will be logged in when there is an error in the sign-in
      console.log(error);
    },
    uiShown: function () {
      //Callback called as soon as sign-in page rendered
      document.getElementById("loader").style.display = "none";
    },
  },
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod:
        firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD,
      requireDisplayName: true,
      forceSameDevice: true,
    },
    {
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: ["https://www.googleapis.com/auth/contacts.readonly"],
      customParameters: {
        prompt: "select_account",
      },
    },
    firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID,
  ],
  signInFlow: "popup",
  tosUrl: "http://localhost:3000/terms-and-condition",
  privacyPolicyUrl: function () {
    window.location.assign("http://localhost:3000/terms-and-condition");
  },
};
ui.start(id, uiconfig);

Kindly tell a simple fix for this problem or does it not work with modern firebase sdk

[jhuleatt]

Hi @GarvGupta20, this library expects the compat versions of the JS SDK and won't work with the newer modular API. Are you passing in the modular SDK instead?

If not, could you please share how you're initializing Auth so we can help find the cause of the problem?

[jonahsebright]

@jhuleatt I have exactly the same error and basically the same code. I import everything with from "firebase/auth"

[dsl101]

I'm seeing the same problem using firebase 10.7.1 and firebaseui 6.1.0. All other providers work fine, but AnonymousAuthProvider does not. This is how I'm initialising:

  import {
    getAuth,
    GoogleAuthProvider,
    GithubAuthProvider,
    EmailAuthProvider,
    AnonymousAuthProvider,
  } from 'firebase/auth'

  import * as firebaseui from 'firebaseui'
  import 'firebaseui/dist/firebaseui.css'

  const auth = getAuth()
  const ui = new firebaseui.auth.AuthUI(auth)

Configuration is (ignoring front-end display stuff):

  const allSignInOptions = [
    { 
      provider: GoogleAuthProvider.PROVIDER_ID,
      buttonColor: styleColours.primary,
    },
    {
      provider: GithubAuthProvider.PROVIDER_ID,
      buttonColor: styleColours.primary,
    },
    {
      provider: 'microsoft.com',
      buttonColor: styleColours.primary,
    },
    {
      provider: 'apple.com',
      buttonColor: styleColours.primary,
    },
    {
      provider: EmailAuthProvider.PROVIDER_ID,
      signInMethod: EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      fullLabel: 'Sign in with Email',
      buttonColor: 'white',
    },
    {
      provider: firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID,
      buttonColor: styleColours.primary,
    },
  ]

      ui.start('#firebaseui-auth-container', {
        signInOptions: allSignInOptions,
        signInSuccessUrl: this.redirect,
      })

Clicking the 'Continue as guest' button produces the following error in the console:

Uncaught TypeError: fn(...).signInAnonymously is not a function
    $b esm.js:365
    I esm.js:214
    Ul esm.js:284
    e esm.js:341
    b esm.js:340
    za esm.js:7
    O esm.js:197
    ye esm.js:70
    xe esm.js:69
    dj esm.js:178
    h esm.js:177
    ve esm.js:67
    re esm.js:68
    b esm.js:64

The guides on using the compat versions of the various functions are quite difficult to follow; I've also tried using this initialisation:

  import { getApp } from 'firebase/app'
  import firebase from 'firebase/compat/app'

  const app = getApp()
  const auth = firebase.auth(app)
  const ui = new firebaseui.auth.AuthUI(auth)

But that results in FirebaseError: Firebase: firebase.auth-compat() takes either no argument or a Firebase App instance. The app instance above looks like this, so I'm not sure what the problem there is: