Next.js Discord

Discord Forum

when I add a middleware.js, all my tailwind styling dissapears on my '/' route and others as well

Answered
Varun posted this in #help-forum
Open in Discord
VarunOP
import { NextRequest, NextResponse } from "next/server";
import {
    authMiddleware,
    redirectToHome,
    redirectToLogin
  } from 'next-firebase-auth-edge'; 
import {authConfig} from './app/config/server-config';

const PUBLIC_PATHS = ['/signup', '/signin', '/'];
export async function middleware(request) {
    return authMiddleware(request, {
      loginPath: '/api/login',
      logoutPath: '/api/logout',
      apiKey: authConfig.apiKey,
      cookieName: authConfig.cookieName,
      cookieSerializeOptions: authConfig.cookieSerializeOptions,
      cookieSignatureKeys: authConfig.cookieSignatureKeys,
      serviceAccount: authConfig.serviceAccount,
      handleValidToken: async ({token, decodedToken}, headers) => {
        // Authenticated user should not be able to access /login, /register and /reset-password routes
        if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) {
          return redirectToHome(request);
        }
  
        return NextResponse.next({
          request: {
            headers
          }
        });
      },
      handleInvalidToken: async (reason) => {
        console.info('Missing or malformed credentials', {reason});
  
        return redirectToLogin(request, {
          path: '/signin',
          publicPaths: PUBLIC_PATHS
        });
      },
      handleError: async (error) => {
        console.error('Unhandled authentication error', {error});
        return redirectToLogin(request, {
          path: '/signin',
          publicPaths: PUBLIC_PATHS
        });
      }
    });
  }
Answered by joulev
Add this
export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}
View full answer

29 Replies

@Varun js import { NextRequest, NextResponse } from "next/server"; import { authMiddleware, redirectToHome, redirectToLogin } from 'next-firebase-auth-edge'; import {authConfig} from './app/config/server-config'; const PUBLIC_PATHS = ['/signup', '/signin', '/']; export async function middleware(request) { return authMiddleware(request, { loginPath: '/api/login', logoutPath: '/api/logout', apiKey: authConfig.apiKey, cookieName: authConfig.cookieName, cookieSerializeOptions: authConfig.cookieSerializeOptions, cookieSignatureKeys: authConfig.cookieSignatureKeys, serviceAccount: authConfig.serviceAccount, handleValidToken: async ({token, decodedToken}, headers) => { // Authenticated user should not be able to access /login, /register and /reset-password routes if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/signin', publicPaths: PUBLIC_PATHS }); }, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/signin', publicPaths: PUBLIC_PATHS }); } }); }
joulev
Add this
export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}
Answer
VarunOP
at the bottom of my middleware?
joulev
Yes
VarunOP
I get this now
got it
ah nvm
thx
tailwind styling is all there
just images arent loading
do i just have to add something to the matcher?
@Varun do i just have to add something to the matcher?
joulev
Yes. Exclude the URLs of the images as well
Basically you are making static asset URLs private, meaning only authenticated users can see your css/images/etc, making the site not work for unauthenticated users
Add stuffs to the matcher to exclude public routes from being affected by the middleware
VarunOP
oh
so i can lowekey
just add public/ to the matcher
like how do I encapuslate all of these in my matcher
ah got it
in my public folder I can pu them in an images folder
and exclude that folder in matcher
vs code not auto updating all the routes tho 😭
VarunOP
some special components like wavesurfer do not render properly when I wrap the authcontext around my outermost layout
should I be wrapping it a lower level in my repo?
if the top level is a public route?
joulev
I don’t know what wavesurfer is
But whatever public asset you have, exclude it from the middleware by providing the url in the matcher or an if statement in the middleware function body