Routing

This will guide you on how you can configure the rules for routing in Firebase-NextJS.

Learn the Basics

Routing in firebase-nextjs is implemented with Middleware. Start by editting the middleware.js to change the rules of routing.

This is the default code for routing that comes with the original NPX script.

// path: middleware.js
    
import FirebaseNextJSMiddleware from "firebase-nextjs/middleware/firebase-nextjs-middleware";

const options = {
    allowRule: "^/_next/|/__/auth/.*" 
}

export default function middleware(req) {
    return FirebaseNextJSMiddleware({ req, options });
}

This rule defines every routes except /_next/ and /__/auth/ as private, ie, requiring authentication..

Routes under /_next/ are required for the internal working of nextjs, to serve Next internal files, and the routes under /__/auth/ are required for Firebase Authentication. (Refer the RegEx section below to understand how the default code works.)

Rules

Firebase-NextJS provides two different ways to define the rules for routing. One by defining the pages manually and the other method using RegEx.

You have to use only one among the provided options.

Option 1: Defining routes

First, you define the default choice and then provide the list of exceptions. The default choice is either to allow every thing by default, or to deny everything by default.

The example below shows how to allow by default and then specify the exceptions. (private paths).

// middleware.js
    
import FirebaseNextJSMiddleware from "firebase-nextjs/middleware/firebase-nextjs-middleware";

const options = {

    gateMode: "allowByDefault", // allowByDefault or denyByDefault
    privatePaths: ["/protected"],

}

export default function middleware(req) {
    return FirebaseNextJSMiddleware({ req, options });
}

If you try to access the page /protected, you will have to log in. Try the demo here. Only logged in users will be able to access that page.

Set the value of "gateMode" to "allowByDefault" and provide the list of protected pages to the parameter "privatePaths".

The example below shows how to deny by default and then specify the exceptions. (public paths).

// middleware.js
    
import FirebaseNextJSMiddleware from "firebase-nextjs/middleware/firebase-nextjs-middleware";

const options = {

    gateMode: "denyByDefault", // allowByDefault or denyByDefault
    publicPaths: ["/public"],

}

export default function middleware(req) {
    return FirebaseNextJSMiddleware({ req, options });
}

Set the value of "gateMode" to "denyByDefault" and provide the list of public pages to the parameter "publicPaths".

Option 2: RegEx

You can use regular expressions to specify the RegEx rule for which routes to allow for the public.

Set your regex pattern to "allowRule" parameter and the paths which match will be public and other paths will need login.

// middleware.js
    
import FirebaseNextJSMiddleware from "firebase-nextjs/middleware/firebase-nextjs-middleware";

const options = {

    allowRule: "^/_next/.*" 

}

export default function middleware(req) {
    return FirebaseNextJSMiddleware({ req, options });
}

The code above will allow only the routes under /_next/ as public, as defined by the provided regex pattern, "^\/_next\/.*"

NOTE: RegEx takes precedence over gateMode. If you provide a value to "allowRules", then the gateMode, privatePaths, and publicPaths parameters will be ignored.

Learn More

Authentication

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

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.

Components

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