Page refresh drops currentUser() using GoTrue with React (Gatsby)

Hi all, I’m trying to set up GoTrue with Gatsby instead of using the Netlify Identity Widget so that I can build my own custom components.

Everything seems to be working fine so long as I only click <Link />s, but if I refresh a page or type a new in-site URL then auth.currentUser() returns undefined, even though I’ve set setCookie to true.

My src/utils/auth.js file looks like this:

import GoTrue from 'gotrue-js';

const auth = new GoTrue({
  APIUrl: "https://MY_URL/.netlify/identity",
  setCookie: true,
});

export default auth;

My Navbar component has the line import auth from '../../utils/auth'; and in its render() function I have the line console.log(auth.currentUser());. Right after a successful login, I see the user object printed correctly into the console, but as soon as I refresh it shows undefined.

When I push my site to Netlify, the build fails with the following error in the Deploy Log:

212 |       var json = localStorage.getItem(storageKey);
...

WebpackError: localStorage is not defined

- user.js?1d1d:212 Function.recoverSession
  ~/gotrue-js/lib/user.js?1d1d:212:1

- index.js?2889:158 GoTrue.currentUser
  ~/gotrue-js/lib/index.js?2889:158:1

...

This seems to be directly related, since reviving an existing session is where GoTrue seems to be having trouble.

Thanks for your help!

[TomPichaud]

This is working just fine for me.

Must set the reminder to true on login (not referenced in the doc).

import React, { Component } from "react"
import GoTrue from "gotrue-js"

// Instantiate the GoTrue auth client with an optional configuration
let auth = new GoTrue({
  APIUrl: "https://YOURS/.netlify/identity",
  audience: "",
  setCookie: true
})

export default class extends Component {
  handleLogin = () => {
    auth
      .login("[e-mail]", "demo", true)
      .then(response => {
        alert("Success!")
        console.log(JSON.stringify({ response }))
      })
      .catch(error => {
        alert("Failed...")
        console.log(JSON.stringify({ response }))
      })
  }
  render() {
    let user = auth.currentUser()
    console.log(user)
    return (
      <>
        <button onClick={this.handleLogin}>Login</button>
      </>
    )
  }
}

But I’m a bit confused about how this API handles it…

If login reminder is set to false the user would not be saved for the session. If cookie is set to true and login reminder is set to true the user would be stored in a cookie. If cookie is set to false and login reminder is set to true the user would be stored in a sessionStorage.

I’ve made the fix, but the doc need to be updated.

[Rezi]

@TomPichaud 's advice with reminder flag worked for me for a Sapper app. Unfortunately the docs are still not updated year after and there are many pull requests pending. Shame on netlify for such a poor support for one of its business products.