VeridaLoginExample = () => {
const [veridaContext, setVeridaContext] = useState(undefined);
const [walletAddress, setWalletAddress] = useState(null);
const [message, setMessage] = useState(null);
this.CONTEXT_NAME = 'Verida Tutorial';
React.useEffect(async () => {
if (!veridaContext) {
if (hasSession(this.CONTEXT_NAME)) {
login();
}
}
}, []);
login = async function () {
const account = new VaultAccount({
request: {
logoUrl: 'https://developers.verida.io/img/tutorial_login_request_logo_170x170.png',
},
});
const context = await Network.connect({
client: {
environment: 'testnet'
},
account: account,
context: {
name: this.CONTEXT_NAME
}
});
if (context) {
setVeridaContext(context);
}
};
logout = async function () {
await veridaContext.account.disconnect(this.CONTEXT_NAME);
setVeridaContext(undefined);
};
this.logout = this.logout.bind(this);
if (veridaContext) {
return (
<div>
<h3>
Logged in! Your <a href='/docs/concepts/accounts-and-identity'>DID</a>
is: <pre>{veridaContext.account.accountDid}</pre>
</h3>
<button onClick={this.logout}>Logout</button>
</div>
);
} else {
return (
<div>
<button onClick={this.login}>Login</button>
</div>
);
}
}