Overview
In this section, you will learn how to use @arcblock/did-connect to subscribe to events such as login, logout, and successful connection to a DID Space.
Prerequisites
- The easiest way to integrate DID Connect is by creating a Blocklet. For instructions on creating a Blocklet, please refer to the Create Blocklet documentation.
- Ensure your application uses
SessionProvider. See: https://www.arcblock.io/docs/blocklet-developer/user-and-passport#login
Code Examples
Subscribe to Login Events
This event is triggered upon successful user login.
import { EVENTS } from '@arcblock/did-connect/lib/Session';
function Example() {
const { events } = useSessionContext();
useEffect(() => {
events.on(EVENTS.LOGIN, (...args) => {
console.log(args);
// coding...
});
}, []);
return <div>Example</div>;
}Following event is triggered when the user cancels login.
import { EVENTS } from '@arcblock/did-connect/lib/Session';
function Example() {
const { events } = useSessionContext();
useEffect(() => {
events.on(EVENTS.CANCEL_LOGIN, (...args) => {
console.log(args);
// coding...
});
}, []);
return <div>Example</div>;
}Subscribe to Logout Events
This event is triggered when the user logs out.
import { EVENTS } from '@arcblock/did-connect/lib/Session';
function Example() {
const { events } = useSessionContext();
useEffect(() => {
events.on(EVENTS.LOGOUT, (...args) => {
console.log(args);
// coding...
});
}, []);
return <div>Example</div>;
}
Subscribe to Profile Events
When the user switches profiles, this event is triggered.
import { EVENTS } from '@arcblock/did-connect/lib/Session';
function Example() {
const { events } = useSessionContext();
useEffect(() => {
events.on(EVENTS.SWITCH_PROFILE, (...args) => {
console.log(args);
// coding...
});
}, []);
return <div>Example</div>;
}When a user cancels switching profiles, this event is triggered.
import { EVENTS } from '@arcblock/did-connect/lib/Session';
function Example() {
const { events } = useSessionContext();
useEffect(() => {
events.on(EVENTS.CANCEL_SWITCH_PROFILE, (...args) => {
console.log(args);
// coding...
});
}, []);
return <div>Example</div>;
}Subscribe to Passport Events
This event is triggered when the user switches Passports.
import { EVENTS } from '@arcblock/did-connect/lib/Session';
function Example() {
const { events } = useSessionContext();
useEffect(() => {
events.on(EVENTS.SWITCH_PASSPORT, (...args) => {
console.log(args);
// coding...
});
}, []);
return <div>Example</div>;
}When the user cancels switching passports, this event will be triggered.
import { EVENTS } from '@arcblock/did-connect/lib/Session';
function Example() {
const { events } = useSessionContext();
useEffect(() => {
events.on(EVENTS.CANCEL_SWITCH_PASSPORT, (...args) => {
console.log(args);
// coding...
});
}, []);
return <div>Example</div>;
}Subscribe to DID Wallet Events
When a user's account is linked to a DID Wallet, this event is triggered.
import { EVENTS } from '@arcblock/did-connect/lib/Session';
function Example() {
const { events } = useSessionContext();
useEffect(() => {
events.on(EVENTS.BIND_WALLET, (...args) => {
console.log(args);
// coding...
});
}, []);
return <div>Example</div>;
}When a user unbinds their DID Wallet, this event is triggered.
import { EVENTS } from '@arcblock/did-connect/lib/Session';
function Example() {
const { events } = useSessionContext();
useEffect(() => {
events.on(EVENTS.CANCEL_BIND_WALLET, (...args) => {
console.log(args);
// coding...
});
}, []);
return <div>Example</div>;
}Subscribe to the DID Space Events
This event is triggered when a user successfully connects to a DID Space.
import { EVENTS } from '@arcblock/did-connect/lib/Session';
function Example() {
const { events } = useSessionContext();
useEffect(() => {
events.on(EVENTS.DID_SPACE_CONNECTED, (response, decryptFunc) => {
console.log(response, decryptFunc);
// coding...
});
}, []);
return <div>Example</div>;
}