Sign-in with Verida Connect SDK
See a walk through of the code
Try it out
The code below shows how to login to the Verida network. It is live - you can press the "Login" button to login, and edit the code to see how it works.
Live Editor
VeridaLoginExample = () => {const [veridaContext, setVeridaContext] = useState(undefined);const [walletAddress, setWalletAddress] = useState(null);const [message, setMessage] = useState(null);this.CONTEXT_NAME = 'Verida Tutorial';React.useEffect(async () => {// Runs after the first render() lifecycle// We use this to check if we are logged in// veridaContext is a Context object (See links below)if (!veridaContext) {// we don't have veridaContext in local state// Check if we have a stored session// hasSession is from the package "@verida/account-web-vault"// see below fod links to documentationif (hasSession(this.CONTEXT_NAME)) {// we know we have a session alreadylogin(); // when logged in this will just setup a Verida Context}}}, []);login = async function () {// Create a VaultAccount. This takes a VaultAccountConfig parameter.const account = new VaultAccount({request: {logoUrl: 'https://developers.verida.io/img/tutorial_login_request_logo_170x170.png',},environment: EnvironmentType.MAINNET,});const context = await Network.connect({client: {environment: EnvironmentType.MAINNET,},account: account,context: {name: this.CONTEXT_NAME}});if (context) {// set the local state variablesetVeridaContext(context);}};logout = async function () {// disconnect the Verida sessionawait veridaContext.account.disconnect(this.CONTEXT_NAME);// reset the internal statesetVeridaContext(undefined);};this.logout = this.logout.bind(this);// if we have a veridaContext we are logged inif (veridaContext) {// user is logged inreturn (<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>);}}
Result
Loading...
Verida Connect documentation
See the Verida Connect documentation for complete documentation.