Netlify Identity Role based Access control not working

[kylesloper]

To clarify this before I explain anything, I am using the Netlify free plan for this site, The site is Eleventy built and has the netlify identity widget in head.njk giving it to every page.

After reading this post, I have tried to impliment access control with netlify identity into my site. I have made redirect rules to redirect to a 404 if the user hasn’t been authenticated with the Netlify Identity widget.

Gated content not working in Chrome (or Chredge)

I’ve been developing in Firefox as usual and my app uses gated content with auth. This has been working perfectly but I’ve just found it fails in edge / chrome and I have no idea why. the netlify CDN returns 404 Everything is as per the documentation so my redirect rule /applicant/* 200! Role=applicant,admin and my user(s) have role: applicant set in the Netlify identiy portal. I get no errors anywhere so am provinding my headers in case they help shed light. I really needot get this going…

_Redirects file in site root

/rates/*	200!	Role=admin

Netlify Identity widget found in every page.

<script async src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

I have assigned roles to the relevant users in the Netlify UI. With no such luck. Is there any other setup needed?

[jonsully]

Hey @kylesloper

Phew! You read our 100+ post thread? that’s awesome. Lots of good content in there.

Role-based access control with Netlify Identity can be… tricky. It’s why I effectively omitted it and instead implemented access control via front-end routing and authorized functions for any actual content in my React <-> Identity integration package, react-netlify-identity-gotrue, but that doesn’t much help you here!

So without knowing your site domain or having an account / getting to poke around with API requests, I’ll just start by asking, once you added a role to a user, did you make sure to log out then back in from the site / user? Adding a role from the Netlify Admin UI doesn’t update the JWT already stored for the logged-in user, and the JWT is what contains the role information. Logging out and back in will pull down a fresh token with the role info baked in. Additionally, make sure you’re attempting to access the gated content within 1 hour of logging in. Anything beyond that and the token needs to be forcibly refreshed before accessing role-gated content. Since the _redirects role-gates operate via the JWT in the cookie and not the JWT in localstorage / JSON, this process can be difficult.

Hope that gets us started!

–
Jon

[kylesloper]

I’ll give you some details for if you want to do some further investigating.

Netlify domain

moonface.netlify.app

Git repo

https://github.com/kylesloper/moonface

[slim]

Hey @kylesloper as @jonsully says it can be complicated but after much pain andsicussion with John I got it working in my protype app - with no client side routing. I’ve just made it open source in case it helps.

So first thing is you need to ensure the browser gets a redirect for the routes in question. This is done by adding another rule for 302.

OpenDirective/TWAM-App/blob/main/src/sitefiles/_redirects

In this case I have these roles:

• none - access public home page
• rdm - plus access to /rdm
• applicant - plus access / applicant
• admin - plus access to everyhting

I found all sorts of weird edge cases and even some browser specific issues. In the end the code encapsulates a working version that handles all the cases and browsers I threw at it.

It is also uses the free (starter) plan, is based on 11ty and I used Firefox for dev

If I get time I’ll distill the auth / routing logic and do something like an egghead lesson.

Hope that helps

[kylesloper]

Thanks for the detailed explanation man.

Just to be clear, do both rdm and applicant reassemble protected pages? I simply exchanged /rdm/* with pages of my own and it still doesn’t seem to work.

[slim]

Yes, I used the same name for role and protected routes but thats not necessary.

If I recall correctly, applicant role is give to anyone who signs up but run is added manually using the netlify control panel.

Does the routing definitely get correctly deployed to the CDN?

[kylesloper]

I don’t entirely know what you mean by if the routing is passed but I’ve just seen that no redirect rules are actually processed on deployment.

Deploy details | moonface (netlify.com)

[jonsully]

Hey @kylesloper

Sorry to be a little slow to get back to you! For starters, @slim and myself have done a lot of digging, playing, and research with role-gated _redirects over the past several months. They can work, but they do have pros and cons. There’s actually another thread going right now along the same lines. I’d recommend you give it a read -

Problems with Redirect JWT role-gated pages on edge

The documentation inconcistently indicates in some places that redirection based Role gating is a Business team teir only feature. However I find it works on the following site. https://deploy-preview-3--twam-gallant-swirles-d68516.netlify.app/ (AKA https://5f25d80e545f090008cbae72--twam-gallant-swirles-d68516.netlify.app/ ) That’s great as I need it for my charity project. I hope it should work as I see this a basic requirement of Jamstack - otherwise you need a function to gate content on …

That said, yes, the “No redirect rules processed” is definitely preventing you from even getting your foot in the door Taking a look at your repository, the issue lies in the structure: A _redirects file needs to ultimately end up in your publish directory. You have it in your root directory but your netlify.toml shows a publish directory of ./_site. I see you’re using Eleventy, which, by default does not publish files it’s unaware of or not processing. To fix that, you’ll just need to add

eleventyConfig.addPassthroughCopy("_redirects");

To your .eleventy.js file

Cheers!

–
Jon

[kylesloper]

Thankyou @jonsully and @slim for your work with role based redirects.
I’ve added the passthrough into eleventy.js and now the UI shows that redirect rules are actually being processed.

Unfortunately still no luck with the actual role based access control since it will only redirect to the fallback method and take the user to the home page even when the user has been authenticated and has the relevant roles.

[jonsully]

Just asking the baseline question here, but have you verified that the role is actually applied to the user? And logged out / back in to ensure that the new JWT is in the browser?

–
Jon

[kylesloper]

@jonsully

Just asking the baseline question here, but have you verified that the role is actually applied to the user? And logged out / back in to ensure that the new JWT is in the browser?

Yes I have. Even deleted and remade the user entirely.

[kylesloper]

Update

Now recieving this error in cli:

◈ Reloading redirect rules from [ '_site\\_redirects', '_redirects', 'netlify.toml' ]
◈ Reloading redirect rules from [ '_site\\_redirects', '_redirects', 'netlify.toml' ]
◈ Reloading redirect rules from [ '_site\\_redirects', '_redirects', 'netlify.toml' ]
◈ Reloading redirect rules from [ '_site\\_redirects', '_redirects', 'netlify.toml' ]
◈ Reloading redirect rules from [ '_site\\_redirects', '_redirects', 'netlify.toml' ]
◈ Reloading redirect rules from [ '_site\\_redirects', '_redirects', 'netlify.toml' ]
◈ Reloading redirect rules from [ '_site\\_redirects', '_redirects', 'netlify.toml' ]
 [Error: EPERM: operation not permitted, stat 'C:\Users\kyles\Desktop\moonface\_site\_redirects'] {
 errno: -4048,
 code: 'EPERM',
 syscall: 'stat',
 path: 'C:\\Users\\kyles\\Desktop\\moonface\\_site\\_redirects'
 }
 [Error: EPERM: operation not permitted, stat 'C:\Users\kyles\Desktop\moonface\_site\_redirects'] {
 errno: -4048,
 code: 'EPERM',
 syscall: 'stat',
 path: 'C:\\Users\\kyles\\Desktop\\moonface\\_site\\_redirects'
 }

[jen]

Hey @kylesloper,
Sorry for the long delay here and thanks for bearing with us- you caught us over a very short-staffed chunk of the holidays. Thankfully, you were in great hands with @jonsully and @slim. I took a look at your site and see that you were successfully deploying redirect rules for a while, but not anymore. Have you decided to go the frontend routing route? Or should we dig into this issue with your redirects file?

[kylesloper]

Yea I would appreciate if we were to be able to look into the issue with the redirects.

[jen]

Great! To get back to a fresh slate on this issue (since there have been several deploys in the meantime), can you please add the redirects for Identity to your netlify.toml and share a link to your deploy log when that’s done? I’ll take a look at what our build system picked up (or didn’t) and check our logs for any errors.

[kylesloper]

Yea sure. Quick question: is is necessary to use netlify.toml in this instance or is the normal _redirects file okay?

[jen]

I have seen some issues where non-printing bytes prevent _redirects and _headers files from being uploaded (see:

Facing issues with Blazor webapp deployed on Netlify

Hi, @Chefty, there are three non-printing bytes at the start of the _headers file causing it not to be proceesed: $ hexdump -C _headers 00000000 ef bb bf 2f 2a 0a 20 20 58 2d 46 72 61 6d 65 2d |.../*. X-Frame-| 00000010 4f 70 74 69 6f 6e 73 3a 20 44 45 4e 59 0a 20 20 |Options: DENY. | 00000020 58 2d 58 53 53 2d 50 72 6f 74 65 63 74 69 6f 6e |X-XSS-Protection| 00000030 3a 20 31 3b 20 6d 6f 64 65 3d 62 6c 6f 63 6b 0a |: 1; mode=block.| 00000040 20 20 52 65 66 65 72 72 65 72 2d 50…

and you also have to make sure they end up in the right published directory… so when debugging, I prefer to stick with netlify.toml in the root directory if it’s alright with you!

[kylesloper]

Yea sure!

I added the redirects in like this, I never touch netlify.toml so It’s causing an error.

[build]
  publish = "_site"
  command = "eleventy"

# REDIRECT and HEADERS examples

# Redirect rule example
# For more information see:- https://www.netlify.com/docs/netlify-toml-reference/

#[[redirects]]
#  from = "/*"
#  to = "/blog/:splat"
# Two-step role-gate with fallback to home page
/rates/*	      200!  Role=rdm,admin
/rates/*   /    302!

# The default HTTP status code is 301, but you can define a different one e.g.
# status = 302

# Headers rule example
# For more information see:- https://www.netlify.com/docs/netlify-toml-reference/

#[[headers]]
#   Define which paths this specific [[headers]] block will cover.
#   for = "/*"

#[headers.values]
#   X-Frame-Options = "DENY"
#   X-XSS-Protection = "1; mode=block"
#   Content-Security-Policy = "frame-ancestors https://www.facebook.com"

# Redirects and headers are GLOBAL for all builds – they do not get scoped to
# contexts no matter where you define them in the file.
# For context-specific rules, use _headers or _redirects files, which are
# applied on a PER-DEPLOY basis.

Here is the error

◈ Reloading redirect rules from [ '_site\\_redirects', 'netlify.toml' ]
[SyntaxError: When resolving config file C:\Users\kyles\Desktop\moonface\netlify.toml:
Could not parse configuration file
Expected "#", "'", "[", "\"", "\n", "\r", [ \t], [A-Za-z0-9_\-] or end of input but "/" found.] {
  expected: [
    { type: 'literal', value: '#', description: '"#"' },
    { type: 'literal', value: "'", description: `"'"` },
    { type: 'literal', value: '[', description: '"["' },
    { type: 'literal', value: '"', description: '"\\""' },
    { type: 'literal', value: '\n', description: '"\\n"' },
    { type: 'literal', value: '\r', description: '"\\r"' },
    { type: 'class', value: '[ \\t]', description: '[ \\t]' },
    {
      type: 'class',
      value: '[A-Za-z0-9_\\-]',
      description: '[A-Za-z0-9_\\-]'
    },
    { type: 'end', description: 'end of input' }
  ],
  found: '/',
  offset: 293,
  line: 14,
  column: 1,
  type: 'userError'
}
[SyntaxError: When resolving config file C:\Users\kyles\Desktop\moonface\netlify.toml:
Could not parse configuration file
Expected "#", "'", "[", "\"", "\n", "\r", [ \t], [A-Za-z0-9_\-] or end of input but "/" found.] {
  expected: [
    { type: 'literal', value: '#', description: '"#"' },
    { type: 'literal', value: "'", description: `"'"` },
    { type: 'literal', value: '[', description: '"["' },
    { type: 'literal', value: '"', description: '"\\""' },
    { type: 'literal', value: '\n', description: '"\\n"' },
    { type: 'literal', value: '\r', description: '"\\r"' },
    { type: 'class', value: '[ \\t]', description: '[ \\t]' },
    {
      type: 'class',
      value: '[A-Za-z0-9_\\-]',
      description: '[A-Za-z0-9_\\-]'
    },
    { type: 'end', description: 'end of input' }
  ],
  found: '/',
  offset: 293,
  line: 14,
  column: 1,
  type: 'userError'
}

C:\Users\kyles\AppData\Roaming\npm\node_modules\netlify-cli\node_modules\netlify-redirector\lib\redirects.js:116
      throw ex;
      ^
abort({"message":"When resolving config file C:\\Users\\kyles\\Desktop\\moonface\\netlify.toml:\nCould not parse configuration file\nExpected \"#\", \"'\", \"[\", \"\\\"\", \"\\n\", \"\\r\", [ \\t], [A-Za-z0-9_\\-] or end of input but \"/\" found.","expected":[{"type":"literal","value":"#","description":"\"#\""},{"type":"literal","value":"'","description":"\"'\""},{"type":"literal","value":"[","description":"\"[\""},{"type":"literal","value":"\"","description":"\"\\\"\""},{"type":"literal","value":"\n","description":"\"\\n\""},{"type":"literal","value":"\r","description":"\"\\r\""},{"type":"class","value":"[ \\t]","description":"[ \\t]"},{"type":"class","value":"[A-Za-z0-9_\\-]","description":"[A-Za-z0-9_\\-]"},{"type":"end","description":"end of input"}],"found":"/","offset":293,"line":14,"column":1,"name":"SyntaxError","type":"userError"}) at Error
    at jsStackTrace (C:\Users\kyles\AppData\Roaming\npm\node_modules\netlify-cli\node_modules\netlify-redirector\lib\redirects.js:1070:13)
    at stackTrace (C:\Users\kyles\AppData\Roaming\npm\node_modules\netlify-cli\node_modules\netlify-redirector\lib\redirects.js:1087:12)
    at process.abort (C:\Users\kyles\AppData\Roaming\npm\node_modules\netlify-cli\node_modules\netlify-redirector\lib\redirects.js:8502:44)
    at process.emit (events.js:315:20)
    at processEmit [as emit] (C:\Users\kyles\AppData\Roaming\npm\node_modules\netlify-cli\node_modules\signal-exit\index.js:161:32)
    at processPromiseRejections (internal/process/promises.js:245:33)
    at processTicksAndRejections (internal/process/task_queues.js:94:32)
(Use `node --trace-uncaught ...` to show where the exception was thrown)

[jen]

Ah no worries, that’s a formatting issue. For the netlify.toml, you’ll want to add them like this:

[[redirects]]
from = "/rates/*"
force = true
status = 200
conditions = {Role = ["rdm", "admin"]}

[[redirects]]
from = "/rates/*"
to = "/"
force = true
status = 302

[kylesloper]

Here is the deploy log :))

Deploy details | moonface (netlify.com)