AuthClient (@dfinity/auth-client) can we use two different identity in same web page?

Developers Programs & Applications
1

I have need two different identity in same page how to get? I have need “authClient.getIdentity()” with two unique values. In my project I have set user and customer login process. how to get authClient.getIdentity for user and customer.

2

The auth client is built around a user login flow. If you have a situation where you need two separate people to log in to the same web browser as separate people, you would need to initialize the auth client twice, or have the first person log out before logging person 2 in.

This would look something like this:

import {AuthClient} from '@dfinity/auth-client';

const userClient = await AuthClient.create();
userLoginButton.addEventListener('click', ()=>{
  userClient.login({
    onSuccess: ()=>setUserIdentity(userLoginButton.getIdentity())
  })
})

// Avoid writing over the user's existing credentials.
class TempStorage{
    #data = {};
    async set(key:string,value:string){
        this.#data[key] = value;
    }
    async get(key:string){
        return this.#data[key];
    }
    async remove(key:string){
        delete this.#data[key];
    }
}
const customerClient = await AuthClient.create({
  storage: new TempStorage()
});
customerLoginButton.addEventListener('click', ()=>{
  customerClient.login({
    onSuccess: ()=>setCustomerIdentity(customerLoginButton.getIdentity())
  })
})
3

Thank you, can you add full example code (use of “storage”) because after page reload authClient not found so every time customer going to login condition.

4

That was the behavior I intended in the code above :sweat_smile:. Perhaps you can explain how your application is intended to work? I don’t think I understand the use case