Introduction

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.

Quick start

Follow these steps if you want to enable Firebase authentication in your application.

1. Enable AuthProvider

Enable Firebase's AuthProvider in /src/pages/_app.tsx.

import { AuthProvider } from "./contexts/FirebaseAuthContext";
        
function App() {
  return (
    <AuthProvider>
      {content}
    </AuthProvider>;
  )
}

2. Enable useAuth hook

Enable Firebase's useAuth hook in /src/hooks/useAuth.ts.

import { AuthContext } from "../contexts/FirebaseAuthContext";
        
const useAuth = () => {
  return useContext(AuthContext);
};

How to use

Learn how to use Firebase authentication. There are multiple examples included, including sign in, sign up, sign out and social logins.

Retrieve user info

import useAuth from '../hooks/useAuth';

const App = () => {
  const { displayName } = useAuth();

  return (
    <span>
      {user.displayName}
    </span>
  );
};

Execute actions

import useAuth from '../hooks/useAuth';

const App = () => {
  const { signIn, signInWithGoogle } = useAuth();

  return (
    <React.Fragment>
      <button onClick={() => signIn()}>
        Sign in
      </button>
      <button onClick={() => signInWithGoogle()}>
        Sign in with Google
      </button>
    </React.Fragment>
  );
};