Advanced

Feelstatic exports basic authentication for convenience, however, there may be instances where a different form of authentication is desired.

Existing authentication

Since Feelstatic only has two main routes (/feelstatic/* and /api/feelstatic/*), securing it becomes relatively simple. This can be achieved by extending an existing Authentication implementation and adding rules that specifically protect those routes.

NextAuth.js example

If you have opted in to the middleware solution with NextAuth (opens in a new tab), adding the feelstatic routes to your matcher config will be easy.

middleware.ts

export { default } from 'next-auth/middleware';
 
export const config = {
  matcher: [
    '/dashboard',
    '/feelstatic(.*)', // <-- add this route
    '/api/feelstatic/((?!/auth).*)', // <-- add this route
  ],
};

Without middleware

If middleware is not an option for you or you prefer to secure specific route levels, you can use your own authentication implementation to wrap the exports of Feelstatic.

Securing api routes

pages/api/feelstatic/[[...fst]].ts

import type { NextApiRequest, NextApiResponse, NextApiHandler } from 'next';
import { FeelstaticApi } from 'feelstatic/api';
 
export default async function FeelstaticSafe(req: NextApiRequest, res: NextApiResponse) {
  const session = getYourSession();
  if (!session) {
    res.status(401).end();
    return;
  }
 
  return await FeelstaticApi(req, res);
}

Securing page routes

app/feelstatic/[[...fst]]/page.tsx

import { FeelstaticPage } from 'feelstatic';
import { redirect } from 'next/navigation';
 
export default async function FeelstaticSafe({ params }) {
  const session = getYourSession();
  if (!session) {
    redirect('/login');
    return;
  }
 
  return FeelstaticPage({ params });
}

Signout button

You have the ability to control the functionality of the signout button by passing a function into the FeelstaticPage component.

app/feelstatic/[[...fst]]/page.tsx

import { FeelstaticPage } from 'feelstatic';
import { redirect } from 'next/navigation';
 
const signOut = () => {
  // sign user out
};
 
export default async function FeelstaticSafe({ params }) {
  const session = getYourSession();
  if (!session) {
    redirect('/login');
    return;
  }
 
  return FeelstaticPage({ params, onSignOut: signOut });
}

Basic