Examples of a redirects file in root folder using netlify ONLY

Yes. I am trying to be send to a page in my site after logging in as an admin, and preventing anyone access who is not an admin

If you are wishing to redirect a user to a specific page after logging in, the only way to do this (AFAIK) is to use the on('login') event from the Netlify Identify Widget.

Have a look at this thread

1 Like

My apologies, but I don’t understand any of this. I can read the netlify widget code. Do I have to run that yarn command on my terminal? If so I can’t, it reads zsh command not found.

@MM6th The yarn add netlify-identity-widget command would install netlify-identity-widget as a dependency of your project using yarn (you could also use npm install netlify-identity-widget to use npm).

I believe the main point is that in your frontend code you can attach a listener with netlifyIdentity.on('login', callback) (where callback is a function) to respond to the login event.

So if you’re using that Netlify Identity Widget, you could attach that listener with something like:

const netlifyIdentity = require('netlify-identity-widget');
netlifyIdentity.on('login', () => window.location = '/library');
1 Like

I gather that is script? And the two pieces of code you wrote, are they separate? Where does the callback code go. Is this for the redirects file, or for the login page?

@MM6th It’s JavaScript and it would go in the client side code, so your “login page” for example.

The identity widget basically pops open the “login form” and has events that it broadcasts based on what occurs.

All the details for it are in the documentation and they have a demo.

Your callback would just be whatever code you want to execute once the event fires, in the above code I provided an inline “one line” example:
() => window.location = '/library'

It would just set the window location to /library, sending the user to that page when the login event fires.

1 Like

Ok I deployed it, and believe I have progress according to the deploy log. I’m under the impression that I have to code a “new-client” id into the form now. Is that what this deploy log is saying? I ask because it’s still now sending me to the library page after logging in as an admin.

Hey @MM6th! First, it sounds like there may be some confusion about how redirects, JavaScript, Identity, and Forms work on Netlify. I’d recommend taking a look at our help docs about role-based access control if you are still having trouble configuring role-based redirects after login.

Once you have successfully configured the role-based redirects and added the Identity Widget, you’ll need to add the following JavaScript to your HTML page:

const netlifyIdentity = require('netlify-identity-widget');
netlifyIdentity.on('login', () => window.location = '/library');

In the last line, you can change the value from /library to whichever page you’d like the users to land once they’ve authenticated.

Regarding your second question about Forms, it’s hard to say exactly what’s going on because we cannot see the form code, but I would recommend taking a look at our docs about Forms to check your Form implementation and see if your question is answered there.

2 Likes

Ok I went back to the basics (which I began with) which is coding the redirect file with this:
/library/* 200! Role=admin

[which is supposed to tell Netlify’s CDN to grant access to the /library path, and everything under it, only to visitors whose JWT tokens include the admin role in their app_metadata.
Any other visitor that tries to access those URLs will be presented with a 404 page.]

Is that assumption correct? Meaning when I log into my Netlify Identity widget it should take me to my library page because my role in my app metadata is admin. Question: the app metadata mentioned here is the identity tab correct?]

If so, here is my netlify widget code, followed by the script code you both provided to me:

    <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Add a menu:
     Log in / Sign up - when the user is not logged in
     Username / Log out - when the user is logged in
    -->
    <div data-netlify-identity-menu></div>
  
    <!-- Add a simpler button:
      Simple button that will open the modal.
    -->
    <div data-netlify-identity-button>Login with Netlify Identity</div>
  </body>
  <script>const netlifyIdentity = require('netlify-identity-widget');
    netlifyIdentity.on('login', () => window.location = '/library');
    </script>

Correct me if I’m wrong. I still am not directed to the library page after logging in. I’m under the impression that the Netlify Identity Widget has its own form built in no? Which is comprised of the sign up data. Nonetheless the data log provides me with this:

4:54:10 PM: WARNING: There are no fields detected for form new-client. Check that any existing form fields have name attributes.
4:54:11 PM: Processing form - requests
4:54:11 PM: Detected form fields:

  • fname
  • artist-name
  • occupation1
  • occupation2
  • occupation3
  • occupation4
  • occupation0

How can I assign ID’s to these when using the Netlify Widget?

Pardon my swiftness. I just seen you put docs about forms up. I will look at that now

I resolved the form obstacle. I had assigned id’s, types. and classes, but no names. Netlify suggests I assign names. I noticed the role label is in the Netlify form example. Do I have to use my own form instead of the widget in order for the server to redirect the admin to the library page?

Yes, but not automatically. This would only work when the page refreshes. If you wish to redirect automatically after logging in, you need to add JavaScript:

You do not need any other forms.

If you can share a basic/blank project that shows your use case - I can possibly make all the necessary changes that should work.

1 Like

Have you seen the code above? I have the script you typed there. Nonetheless I’m open to try again:

My redirects file is as follows:
/library/* 200! Role=admin

My html code is as follows:

Login
    <!-- include the widget -->
    <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Add a menu:
     Log in / Sign up - when the user is not logged in
     Username / Log out - when the user is logged in
    -->
    <div data-netlify-identity-menu></div>
  
    <!-- Add a simpler button:
      Simple button that will open the modal.
    -->
    <div data-netlify-identity-button>Login with Netlify Identity</div>
  </body>
  <script>const netlifyIdentity = require('netlify-identity-widget');
    netlifyIdentity.on('login', () => window.location = '/library');
    </script>

I now have both of these pages in a new root folder by themselves. Is this what you mean by sharing a basic/blank project that shows my use case?

I think Hrishikesh was asking for an entire codebase, with the widget and only its associated files, so he could build, modify, and advise. You’ve given just a small javascript snippet. Do you have a copy of the project that has most of your customizations pulled out that shows just the problem in login/redirects? That would be most helpful for us if you want us to write code, which we usually don’t do for customers, but we definitely won’t even try to do with partial details like these :slight_smile:

1 Like

Sure, I have a copy of the type of codebase you are requesting. How would I share it with you? (anywhere but GitHub please). Btw, I’m a bit confused. You say you won’t try with partial details like these, but the partial details you see is what exists in my codebase with all of my customizations pulled out. It has the root folder, the login page, and the _redirects file

We’ll need to see the repo in whichever git provider you use – is this repo hosted somewhere other than on GitHub?

2 Likes

No. Only on my local computer is the repo. Do you have any recommendations other than GitHub?

Not sure what you have against GitHub @MM6th, but if you really don’t wish to use it, any other git provider such as GitLab or Bitbucket would work.

1 Like

Understood. Thanks. I decided to use GitHub to keep it simple hopefully. I just had failed experiences with it before that’s all. Here is the link to my repo:

I’ve opened a PR:

You can test the behaviour on this site: https://resilient-jelly-280b19.netlify.app/

Credentials:

Email: test@test.com
Password: test

You can also create any other user (any email should work without having to confirm). Since that user won’t have the admin role, the redirects should work. This is the behaviour you’d get by merging by above PR. If you need a different behaviour, let us know.

1 Like