Authentication

Most apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices. Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.

Firebase Authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with your custom backend.

Before you start. Firebase offers an alternative to this SDK if you only need Authentication in your app.

FirebaseUI

FirebaseUI provides a drop-in responsive authentication flow based on Firebase Authentication, allowing your app to integrate a sophisticated and secure sign-in flow with low effort. FirebaseUI automatically adapts to the screen size of a user's devices and follows best practices for auth flows.

FirebaseUI supports multiple sign-in providers. Visit the documentation in GitHub to learn more about the various configuration options offered by FirebaseUI.

Authentication Hook

1. Import the Authentication Hook

   import { useAuth } from "@netsoft/firebase";

2. In your component, access the auth object through the hook.

   The useAuth() hook give's you access to several properties:

   // Access the user metadata, the error information (if any), the state and the locale (language)
   const { user, isBusy, error, locale } = useAuth();

   The default language is inferred by the browser language, but if necessary, it is possible to set a custom language:

   const { locale } = useAuth({ locale: "pt-PT" });

   The locale is then injected into all providers that support localization.

   The available methods allow you to access the various signIn mechanisms:

   // Access and use the `signInAnonymously` and the `signInWithEmailAndPassword` methods
   const { signInAnonymously, signInWithEmailAndPassword } = useAuth();
   signInAnonymously();
   signInWithEmailAndPassword(email, password);

   // Access and use the Google SignIn methods
   const { signInWithGoogle } = useAuth();
   signInWithGoogle();
   // optionally you can also indicate a list of scopes and other options:
   const scopes = ["https://www.googleapis.com/auth/contacts.readonly"];
   signInWithGoogle(scopes);
   signInWithGoogle(scopes, { popup: true });

   // Access and use the Facebook SignIn methods
   const { signInWithFacebook } = useAuth();
   signInWithFacebook();
   // optionally you can also indicate a list of scopes and other options:
   const scopes = ["user_birthday"];
   signInWithFacebook(scopes);
   signInWithFacebook(scopes, { popup: true });

   // Access and use the Twitter SignIn methods
   const { signInWithTwitter } = useAuth();
   signInWithTwitter();
   signInWithTwitter(null, { popup: true });

   // Access and use the GitHub SignIn methods
   const { signInWithGitHub } = useAuth();
   signInWithGitHub();
   const scopes = ["repo"];
   signInWithGitHub(scopes);
   signInWithGitHub(scopes, { popup: true });

   // Access and use the Microsoft SignIn methods
   const { signInWithMicrosoft } = useAuth();
   signInWithMicrosoft();
   // optionally you can also indicate a list of scopes and other options:
   const scopes = ["mail.read", "calendars.read"];
   signInWithMicrosoft(scopes);
   signInWithMicrosoft(scopes, {
       popup: true,
       // Target specific email with login hint.
       login_hint: "user@firstadd.onmicrosoft.com",
       // Optional "tenant" parameter in case you are using an Azure AD tenant.
       tenant: "TENANT_ID",
   });

   // Access and use the Apple SignIn methods
   const { signInWithApple } = useAuth();
   signInWithApple();
   // optionally you can also indicate a list of scopes and other options:
   const scopes = ["email", "name"];
   signInWithApple(scopes);
   signInWithApple(scopes, { popup: true });

   // Access and use the Yahoo SignIn methods
   const { signInWithYahoo } = useAuth();
   signInWithYahoo();
   // optionally you can also indicate a list of scopes and other options:
   const scopes = ["mail-r", "sdct-w"];
   signInWithYahoo(scopes);
   signInWithYahoo(scopes, {
       popup: true,
       // Prompt user to re-authenticate to Yahoo.
       prompt: "login",
   });

3. SignOut

   const { signOut } = useAuth();
   signOut();