Custom Authentication

This will guide you on how to customise the authentication pages..

Overview

The following pages are provided by default by the NPX script. The easiest way to customise the design is by editting these pages in your project.

Customisation

How to design the page is completely up to you. You can make use of the following components while doing that.

NOTE: The routes are predefined. For example, whatever page you place under the route /login will be the login page for every purpose.

Google Login

Google authentication is provided out of the box. Make use of the GoogleSignInButton component.

1// Path: src/app/login/page.tsx
2
3import { GoogleSignInButton } from "firebase-nextjs/client/components";
4
5export default function LoginPage() {
6    return <main>
7        <GoogleSignInButton>
8            <button> "Sign in with Google" </button>
9        </GoogleSignInButton>
10    </main>
11}

You can either provide a component (like a button) as a child to the GoogleSignInButton (the above example), or use GoogleSignInButton component without children for the default UI.

Email - Password Login

Email Password login is supported, but needs some setup.

1// Path: src/app/login/page.tsx
2
3import { EmailSignInButton } from "firebase-nextjs/client/components";
4import { useState } from "react";
5
6export default function LoginPage() {
7
8    const [email, setEmail] = useState("");
9    const [password, setPassword] = useState("");
10    const [errorMessage, setErrorMessage] = useState("");
11
12    function handleChange(e) {
13        if (e.target.type === "email") setEmail(e.target.value);
14        if (e.target.type === "password") setPassword(e.target.value);
15        setErrorMessage("")
16    }
17
18    return <main>
19
20        <input type="email" placeholder="Email" onChange={handleChange} />
21        <input type="password" placeholder="Password" onChange={handleChange} />
22
23        { errorMessage }
24
25        <EmailSignInButton email={email} password={password} setErrorMessage={setErrorMessage}>
26            <button> "Sign in" </button>
27        </EmailSignInButton>
28
29    </main>
30}

You can either provide a component (like a button) as a child to the EmailSignInButton (the above example), or use EmailSignInButton component without children for the default UI.

Github Login

Github authentication is provided out of the box. Make use of the GithubSignInButton component. Be sure to add Github as an authentication provider in Firebase first.

1// Path: src/app/login/page.tsx
2
3import { GithubSignInButton } from "firebase-nextjs/client/components";
4
5export default function LoginPage() {
6    return <main>
7        <GithubSignInButton>
8            <button> "Sign in with Google" </button>
9        </GithubSignInButton>
10    </main>
11}

You can either provide a component (like a button) as a child to the GithubSignInButton (the above example), or use GithubSignInButton component without children for the default UI.

Learn More

Custom Routing

Learn how to configure the rules for which routes are accessible to which users.

Authentication

Learn how to manage the authentication state of users on client side and server side.

Moving to Production

Learn how to setup the project to be production ready.

Components

Learn about the pre-built components that come with Firebase-NextJS.