Simple way to protect an API route

[dohomi]

Is your feature request related to a problem? Please describe.
Im currently investigating if I would use in an upcoming project firebase with NextJS. Is there a simple way to protect an API route? I've seen that you pass the Authentification token to fetch the API example but would it not be simpler to check the cookie on server side to validate if the API is protected? I was using for an Auth0 project nextjs-auth0 (https://github.com/auth0/nextjs-auth0#api-reference) which did a similar job just instead of Firebase it was Auth0

Describe the solution you'd like and how you'd implement it
Similar to protect SSR routes protecting API routes

Is this a breaking change?
I don't think so

Describe alternatives you've considered
Currently pass the token from client to server via headers but I think there could be a simpler approach

[kmjennison]

Yes, you can use the ID token from the cookie if you want (or the user's auth info directly), though there's not a helper in this package for doing so. You shouldn't have to handle refreshing the token in this case because the auth cookies are automatically updated when the Firebase JS SDK updates an ID token. However, you should still validate any ID token you're using.

One possible corner case bug: when using this package, it's possible for a user to be authed but not have cookies set. This would happen when the user is logged in to Firebase but (for example) cleared cookies prior to a page load. Before the call to login, any other API calls would be missing auth cookies.

My two cents: unless you have a compelling reason for using cookies, I'd recommend using an auth token in a header. It avoids some potential CSRF-related security holes, would make your API endpoints easier to use from other non-web apps, and is more in line with how Firebase services work.

[alextaymx]

is there a way to get the user (logged in user information) back by using the token (cookie) in the request header?

[zaverden]

there is an option I described here:
#223 (comment)

[gavinharris-dev]

Hi @alextaymx ,

So I have created an API Middleware (withAuthUserTokenAPI.ts):

import { NextApiRequest, NextApiResponse } from 'next';
import { AuthUser, verifyIdToken } from 'next-firebase-auth';

export interface AuthenticatedNextApiRequest extends NextApiRequest {
  AuthUser?: AuthUser;
}

/**
 * API Middleware for Firebase ID Token Authorization.
 * API endpoints wrapped with this middleware will be required to be executes with a
 * `bearer <id token>` Authorization header.
 * e.g.,
 * ```
 * await fetch('<baseUrl>/api/hello', { headers: {authorization: 'bearer <IDToken>'}});
 * ```
 * @param {*} handler
 * @returns Wrapped handler method that is used by NextJS.
 */
const withAuthUserTokenAPI: <T extends unknown>(
  handler: (
    authReq: AuthenticatedNextApiRequest,
    res: NextApiResponse<T>
  ) => void
) => (req: NextApiRequest, res: NextApiResponse) => void =
  (handler) => async (req, res) => {
    if (
      !req.headers.authorization ||
      !req.headers.authorization.match(/^bearer .*$/i)
    ) {
      res.status(401).send({ message: 'Unauthorized', code: 1 });
      return;
    }

    const token = req.headers.authorization.split(' ')[1];

    try {
      const authUser = await verifyIdToken(token);

      if (!authUser.id) {
        res.status(401).send({ message: 'Unauthorized', code: 2 });
        return;
      }

      (req as AuthenticatedNextApiRequest).AuthUser = authUser;
      handler(req, res);
    } catch (err) {
      console.error(
        'Error verifying Provided ID Token',
        err.message,
        err.stack
      );
      res.status(401).send({ message: 'Unauthorized', code: 3 });
    }
  };

export default withAuthUserTokenAPI;

The in the api route you wrap your 'handler' with this Middleware; eg:

async function handler(
  req: AuthenticatedNextApiRequest,
  res: NextApiResponse<Data>
) {
...
}

export default withAuthUserTokenAPI(handler);

Lastly to call your API, you need to provide a bearer Authorization header.

  const endpoint = getAbsoluteURL('/api/secureAPI');

  const response = await fetch(endpoint, {
    method: 'POST',
    body: JSON.stringify({

    }),
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${await getIdToken()}`, // getIdToken from `useAuthUser()`
    },
  });

  if (response.status != 200) {
    throw new Error('Unauthorized');
  }

  const body = await response.json();

[madhurjain]

changed to return handler(req, res); inside withAuthUserTokenAPI to avoid the below error

API resolved without sending a response for /api/secureAPI, this may result in stalled requests

updating it to await handler(req, res); also helps