Components

Firebase-NextJS comes with pre built components that help in improving the user experience and reducing the developer effort.

Profile Button

This component provides a button, and upon clicking, a user popup will be opened. It can be used on client side as well as server side pages.

import { ProfileButton } from "firebase-nextjs/client/components";

export default function Page() {
    return <div>
        <ProfileButton />
    </div>
}

RESULT

Logout Button

Log out button takes children and the when the user clicks on the children, the user will be logged out.

import { LogoutButton } from "firebase-nextjs/client/components";

export default function Page() {
    return <div>
        <LogoutButton>
            <button> Log Out </button>
        </LogoutButton>
    </div>
}

RESULT

If you would like to see any more components, please add an issue at
https://github.com/NirmalScaria/firebase-nextjs/issues.

Learn More

Custom Routing

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

Customise Login Pages

Learn how to customise the login pages to match your app's design.

Moving to Production

Learn how to setup the project to be production ready.

Authentication

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