Looking for help implementing log out function

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


export default LogOut;

Thank you for your help :pray:

1 Like

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) => ({
    identity: null,
    invitationCode: null


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

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:


  • window.location.reload
  • authClient = null

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

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.