Netlify identity widget logged in user help

I’m trying to get netlify-identity-widget working with AlpineJS. It’s working fine when testing the user is logged in via gotrue.user in localStorage, but I’m not sure that’s ideal or safe (?) and so I was trying to use netlifyIdentity.currentUser() instead, but that isn’t working after refreshing the page.

I know it’s something super simple and I’m probably close, but yet so far away, so any support would be greatly appreciated.

import netlifyIdentity from "netlify-identity-widget";

const loggedInCheck = () => {

  // this doesn't work
  //const user = netlifyIdentity.currentUser();

  // this works
  const user = window.localStorage.getItem("gotrue.user");

  if (user) {
    return true;
  }
  return false;
};

export default () => ({
  isLoggedIn: loggedInCheck(),

  // https://alpinejs.dev/globals/alpine-data#init-functions
  init() {
    netlifyIdentity.init();

    netlifyIdentity.on("login", (user) => {
      if (user) {
        this.isLoggedIn = loggedInCheck();
      }
    });

    netlifyIdentity.on("logout", () => {
      window.localStorage.removeItem("gotrue.user");
      this.isLoggedIn = loggedInCheck();
    });
  },

  netlifyLogin() {
    netlifyIdentity.open("login");
  },

  async netlifyLogout() {
    await netlifyIdentity.logout();
  },
});

I also tried passing user from netlifyIdentity.on("login", (user) => {} to loggedInCheck(), and I thought that worked, but then it didn’t seem to when all said and done.

const loggedInCheck = (user) => {

  if (user) {
    return true;
  }
  return false;
};

....

    netlifyIdentity.on("login", (user) => {
      if (user) {
        this.isLoggedIn = loggedInCheck(user);
      }

When you say “this doesn’t work”, what are you seeing?

I can only go from the fragments of code that you’ve posted, but one thing I see is an initial call to loggedInCheck immediately which will be occuring before init is executed and thus before netlifyIdentity.init() is called.

I can also see that the .on( "login" event handler fires when they login and receives the user as an argument, so I’m not sure why you would then need to call another function to then try and retrieve the user via the netlifyIdentity.currentUser() getter to determine if they’ve logged in?

This is not going to work as I’m firing from the hip, but could you not just do something like…

export default () => ({
  isLoggedIn: false,

  // https://alpinejs.dev/globals/alpine-data#init-functions
  init() {
    netlifyIdentity.init();

    netlifyIdentity.on("login", (user) => {
      this.isLoggedIn = true;
    });

    netlifyIdentity.on("logout", () => {
      this.isLoggedIn = false;
    });
  },

  netlifyLogin() {
    netlifyIdentity.open("login");
  },

  async netlifyLogout() {
    await netlifyIdentity.logout();
  },
});

Thanks for the reply!

This being, the logged in state isn’t persisting across page loads.

This was to check if the user was logged in between page reload or different pages.

Your code works fine and is what I started with in fact, it’s just not persistent.

Just to be clear, this works perfectly fine and is doing exactly what I want it to:

import netlifyIdentity from "netlify-identity-widget";

const loggedInCheck = () => {

  const user = window.localStorage.getItem("gotrue.user");

  if (user) {
    return true;
  }
  return false;
};

export default () => ({
  isLoggedIn: loggedInCheck(),

  init() {
    netlifyIdentity.init();

    netlifyIdentity.on("login", (user) => {
      if (user) {
        this.isLoggedIn = loggedInCheck();
      }
    });

    netlifyIdentity.on("logout", () => {
      window.localStorage.removeItem("gotrue.user");
      this.isLoggedIn = loggedInCheck();
    });
  },

  netlifyLogin() {
    netlifyIdentity.open("login");
  },

  async netlifyLogout() {
    await netlifyIdentity.logout();
  },
});

The question with that is, is checking for the user via the localStorage a safe way to do it? Or is there another way to check if a user is logged in and valid without using localStorage and the gotrue.user. My concern with checking the local store is that it’s editable.

So I’m trying to figure out if there is a way to test if the user is logged using a different method. And why I started playing with netlifyIdentity.currentUser();

Ahh, I’ve not worked with Netlify Identity before and had mistaken that their login event worked a little bit like the Firebase onAuthStateChanged event, which does fire on subsequent page loads when it detects the users auth state.

I note that in the documentation the init event receives the user as an argument.

So I’m wondering if the following would get you the user when available on subsequent page changes…

netlifyIdentity.on( "init", user => {

} )

netlifyIdentity.init();

Something along the lines of…

export default () => ({
  isLoggedIn: false,

  // https://alpinejs.dev/globals/alpine-data#init-functions
  init() {
    netlifyIdentity.on("init", user => {
      this.isLoggedIn = !!user;
    });

    netlifyIdentity.on("login", user => {
      this.isLoggedIn = true;
    });

    netlifyIdentity.on("logout", () => {
      this.isLoggedIn = false;
    });

    netlifyIdentity.init();
  },

  netlifyLogin() {
    netlifyIdentity.open("login");
  },

  async netlifyLogout() {
    await netlifyIdentity.logout();
  },
});

Depending of course on what is actually passed as the user, it’s unclear to me from the Github documentation what it passes when there is no authenticated user.

On initial testing, that seems to be working great! Much cleaner too. Thank you!

I see it’s removing the gotrue.user from local storage, so no need to remove it myself on logout (not sure if that was ever necessary; can’t remember why I had it.)

Might that information be in the gotrue api docs? GitHub - netlify/gotrue: An SWT based API for managing users and issuing SWT tokens.

Perhaps, but I’m not reading that, I’m inherently lazy :laughing:

Plus I’d still need to test assumptions anyway, so I’d probably just do:

netlifyIdentity.on("init", user => {
  console.log( user );
});

Then see what I see when the user is logged in, and when they’re logged out.

Looks like it’s returning null.

Excellent, if it’s an object when they’re logged in and null when they’re logged out, then the code I supplied will work fine.

Yup, that’s exactly what I’m getting. Thanks again for your help!