Forcing a refresh after login using netlify-identity-widget.js

I’m experimenting with (and trying to learn how to use) the netlify-identity-widget

see site https://hardcore-banach-5d5892.netlify.com/

I have a simple site set up, with one user and the following code (see below).

This does what I need it to do, except, the page doesn’t refresh after the pop-up is closed. Therefore, the page will show ‘logged in as’ went he user is logged out, and not login information if the user is logged in (that is, until a page is refreshed).

Two questions: 1) how can I force a page refresh, 2) what is a better approach? I could use data-netlify-identity-menu, but this is an invite-only site and I don’t want the option to create an account.

<head>

    <meta charset="utf-8" />

    <title>My App</title>

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

</head>
hello world

<br>

<div data-netlify-identity-button></div>

<script>

    const auth = new GoTrue({

        APIUrl: 'https://hardcore-banach-5d5892.netlify.com/.netlify/identity',

        audience: '',

        setCookie: true,

    });

    // Get the current user object, or null if no-one is logged in

    const user = auth.currentUser()

    if (user) {

        document.write("You're logged in as ")

        document.write(user.email)

    }

</script>

It looks like you’re using GoTrue and not Netlify Identity Widget. While the Widget uses GoTrue under the hood, I wonder why you’ve all the GoTrue stuff setup even though you’re not going to need it.

But to answer your question, you simply need:

netlifyIdentity.on('logout', () => location.reload());
// replace logout with login if needed
1 Like

Thanks for the response.

Well, it may be easy for you, but if I’m taking this much time to try to figure this out - I’m sure others are as well. I tried adding what you placed in your response, and it started an infinite loop.

Since this is easy for you (I’m referencing your response to my other request for more information on authentication with netlifyIdentify), please tell me how to do the following:
Protect the content of the entire site. When an unauthorized user attempts to access, immediately display the login in pop-up window. Once the user is authorized, display the page they were attempting to view (and what snippet of JS can I use in my page when I want to reference the user’s email to let them know they are logged in using that email, and for them to logout)

What you’re asking for is specific code and that’s not something we provide support with.

But, I’ll basically be repeating myself as per my reply in the previous thread:

You need to add Identity Widget to your site, how to do that is documented here:

Then, you need to add RBAC, which is documented here:

It’s a 2-step process, really.

All you need to do is listen for those events and use JavaScript to load the correct page. Without seeing what you’ve tried so far that’s giving you an infinite loop of redirects, I can’t comment much. That’s the setup that has worked for other users, should work for you too.

Well, I gave netlify a good try - but it’s time to move back to Azure or AWS. I wish I could get back the time (and subscription money) I spent attempting to get Netlify to work for me; but it’s ‘sunk cost’ now.

Hey @hrishikesh, I’ve stumbled upon this query and is trying to achieve the same thing. I’ve set a redirect rule on my login page to redirect to home page if the role is correct, but without a refresh the redirection won’t occur after logging in. I was just wondering on where would that code snippet be placed? I’ve tried adding a identity-login.js function with location.reload(); within but it seems to not be firing.

Any advice on this?

Do we have a site to see?