lundi 30 mars 2020

How to customize Firebase auth handler UI

I'm working on a React project and I've implemented authentication using firebase/auth package. For identity provider login I use firebase.auth.GoogleAuthProvider, firebase.auth.FacebookAuthProvider and firebase.auth.OAuthProvider passed into signInWithPopup method

  switch (type) {
    case LoginType.GOOGLE:
      provider = new firebase.auth.GoogleAuthProvider();
      scopes = ['profile', 'email'];
      break;
    case LoginType.FACEBOOK:
     ...    
    }
  }

  for (let scope of scopes) {
    provider.addScope(scope);
  }

  const { user } = await firebaseApp.auth.signInWithPopup(provider);

It works great, but now I need to adjust graphic of auth handler available at https://my-project.firebaseapp.com/__/auth/handler a bit.

The change I need is to replace default material design loader (at the screenshot) with the project loader. Does anybody know or have experiences with how to accomplish that?

Firebase auth handler with default loader screen




Aucun commentaire:

Enregistrer un commentaire