Redirects interaction with loading css/js on next.js while restricting site by role

Support
, ,
1

Hello, I am new to Netlify and Next.js so my apologies if I’m missing something.

I have deployed a version of the site with the role requirements and redirects removed.

I have a next.js app deployed on Netlify. This site is configured with GitHub - twilio-labs/netlify-okta-auth: Use Okta as your identity provider with Netlify's Role-based access control with JWT.

  • This has me implement redirect to force users to login before they may access the site.
  • I also added a redirect to index.html in my netlify.toml to fix an issue with loading images and JS.

That leaves my redirects like this:

# Redirect for dynamic pages in SPA
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  conditions = {Role = ["Everyone"]}

# This redirects unauthenticated users to Okta.
[[redirects]]
  from = "/*"
  to = "/.netlify/functions/login"
  status = 200
  force = true

When running locally, the site looks fine.

When deploying on Netlify I receive errors like following for anything under /_next/static/*
Uncaught SyntaxError: Unexpected token '<'. CSS and JS will not load.

The issue persists even when the only redirect is:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

I found adding the following to the top of my my netlify.toml redirects fixes the issue, as the files are present in the static directory.

# This makes the chunks and generated CSS work.
[[redirects]]
  from = "/_next/*"
  to = "/:splat"
  status = 200
  conditions = {Role = ["Everyone"]}

Downloading a copy of the deployed app then looking at the redirects, I see that Netlify generated

[[redirects]]
from = "/_next/static/*"
to = "/static/:splat"
status = 200

Which is like what I’m doing above. However, it does not seem to apply. My hunch is that my other redirects are interfering as they are a higher priority, but I’m not sure how to work around it while keeping the site restricted by role.

Is re-writing the auto generated rules myself with the Everyone condition above the “correct” way to fix this? I’m concerned about my rules messing up any of the auto-generated rules.

Thanks!

2

Hey @Amand,

Sorry for the delay. The thread slipped from our internal tracking system. We’ve got it back in the loop, so you can expect follow-ups moving forward.

First things, are you still facing issues? If yes, could you share a site name?

I’m curious as to why do you have the dynamic SPA rule as Next.js should not require that.

3

Hi @hrishikesh,

I’ve managed to get the site working as expected by applying the configurations above.

If I remove the SPA rule, then it enters a redirect loop to the login function.

I believe that the login redirect is preventing requests from getting to the Netlify plugin generated rules, therefore I had to add rules myself to make the site work.

The issue is that I want to restrict the entire site to authenticated Okta users only, and I’m not sure how to do that with a rule that does not catch all. If I have a catch all rule, then the request cant make it to the generated rules.

If conditions had a way for me apply a redirect to only users without a role it may work but I’ve been unable to find a way to do that.

Thanks!

4

Why not use Next.js middleware to do this? No need to add custom redirect rules and use any complicated setup. The middleware can be configured to run on all or specific routes.

5

My apologies if I’m missing something, I’m new to Next.js and Netlify. Any examples would be very helpful.

Do you mean do something similar to this to implement my own redirects in next.js rather than in my netlify.toml like they do here?

6

That guide does sound something that should be useful to help you get started.

7

We ended up solving this by switching to NextAuth - https://next-auth.js.org/ and handling the redirects based on sessions / roles within Next.js rather than with Netlify redirects.

8

Hi @Amand :wave:t6: ,

Thanks so much for sharing your solution with the community. (: