GoTrue: Login with External Providers (Vue app)

Support
1

Hi there,

I’ve managed to implement regular Signup/Login with the GoTrue API by following the information available on the demo website (the official documentation was too vague for me) but I’ve hit a wall regarding handling external provider authentication, in my case Google/Github.

After attempting to log with these, I am redirected back with an access_token in the url, but I’m failing to understand how or if I should handle it.
I’ve honestly tried so many things that I’ve lost track of what I’ve attempted in this regard.

I believe I might need some help understanding what should be done to address, as I am not particularly experienced in that area.
I’ve left the default configuration on my Netlify’s Identity dashboard (aka “Visitors will see Netlify Identity as the app requesting authorization.”)

Here is the website’s url (relevant page):
https://crisp-sandbox.netlify.app/account

The relevant files where the setup can be viewed are the following:
main.js
identity.js (helper/composable which gathers my Netlify Identity functions)
LoginHandler.vue (component which handles the login)

Any help/suggestion would be greatly appreciated, as I am at a complete stop at the moment

Thank you very much!

2

That access token is the JWT you need to save or use to authenticate the user. I believe you can decode the JWT, and save it to locastorage as gotrue.user.

3

Thank you for your answer!

I believe I managed to follow up on this info and got something to work.
There’s still some polishing to do but it seems this was the way to go, thank you!

export async function authCallback() {
  const hashParams = new URLSearchParams(window.location.hash.substr(1));

  if (!hashParams.has("access_token")) {
    throw new Error("No access token found.");
  }

  const accessToken = hashParams.get("access_token");
  const userData = jwtDecode(accessToken);

  const userObject = {
    url: "https://crisp-sandbox.netlify.app/.netlify/identity",
    token: {
      access_token: accessToken,
      token_type: "bearer",
      expires_in: 3600,
      expires_at: userData.exp * 1000,
    },
    id: userData.sub,
    email: userData.email,
    app_metadata: userData.app_metadata || {},
    user_metadata: userData.user_metadata || {},
    created_at: userData.iat,
    updated_at: userData.iat,
  };

  localStorage.setItem("gotrue.user", JSON.stringify(userObject));
  window.history.replaceState({}, document.title, window.location.pathname);

  return userObject;
}