Looking for help implementing log out function

Developers Language Support
1

I successfully implemented the log-in function on a canister (local only for now) and I’m trying to implement the log-out function. Still, it seems like auth-client dependence is not pulling the log-out functionally. I don’t know if I’m writing it wrong or if there is another way to set the function. I was going over the library several times but can’t seem to find why the function does not work.
I’m using React, this is the logOut component:

import React from "react";
import { AuthClient } from "@dfinity/auth-client";

function LogOut() {

   async function handleClick(){
    const authClient = await AuthClient.create();
    await authClient.logout({
      onSuccess: () =>{
        console.log("logged out");
      }
    })
  

return  (<p className="trade-buttons">
        <button id="btn-payout" onClick={handleClick}>
          Log Out
        </button>
      </p>
);

}
}


export default LogOut;

Thank you for your help :pray:

1 Like
2

What do you mean with “not pulling the log-out”?

In Svelte, this is how I sign-out the auth-client in Juno’s console:

signOut: async () => {
  const client: AuthClient = authClient ?? (await createAuthClient());

  await client.logout();

  // This fix a "sign in -> sign out -> sign in again" flow without window reload.
  authClient = null;

  update((state: AuthStoreData) => ({
    ...state,
    identity: null,
    invitationCode: null
  }));
}

https://github.com/buildwithjuno/juno/blob/db937ea67602e63768a7253f40be88ff7ed10bed/src/frontend/src/lib/stores/auth.store.ts#L77

3

The logOut function is in a different component so I’m not sure if I need to re-create the Authclient constant again or just import it from the component it was create in order to log the user out of the system

4

The logout function itself works to cancel the delegation and clean the browser storage regardless which object of auth-client you are using because it’s stateless (source).

However, yes, if you do not reload the window, as I do, you should destroy previous object(s) of auth-client before re-creating new one on next sign-in.

As you can notice in my above snippet, after the logout I explicitly reset it to null.

In short, after logout:

either

  • window.location.reload
    or
  • authClient = null
5

Hey Peter,
Thank you for your help.
I still facing some difficulties regarding this matter, could you help me out? I’m trying to create a toggle button that as soon as the user will log-in the button will switch to “log-out” and if he will click the “log-out” it will destroy the object and refresh the page, the problem is I’m not sure if I’m using useContext and useState hooks the right way to make the log-in and log-out buttons globally. I tried it several times but I’m still getting an error. will you be able to help me? I’m getting really frustrated with that it feels like it should be a very basic and simple function to build and yet somehow I manage to mess it up.
Thank you

6

Unfortunately sounds like your issue is related to your implementation and usage of React. If it can help you can have look to this relatively minimal repo in which I use a context and state. Good luck.