Simple Login
This example demonstrates one of the most common use cases for DID Connect: authenticating a user by requesting their basic profile information. The application will ask the user to share details like their name and email from their DID Wallet, providing a streamlined and secure login experience without passwords.
This approach is ideal for establishing a user session and creating or updating a user record in your application's database.
Backend Implementation#
The core of the simple login flow is a server-side handler that defines a profile claim. This tells the DID Wallet which specific pieces of user information your application needs.
Here is a complete example of how to attach this handler to an Express.js server using WalletHandlers.
const SimpleStorage = require('@arcblock/did-connect-storage-nedb');
const { fromRandom } = require('@ocap/wallet');
const { WalletAuthenticator, WalletHandlers } = require('@arcblock/did-connect-js');
const express = require('express');
// Basic setup for authenticator and handlers
// In a real application, you would persist and reuse the wallet.
const wallet = fromRandom();
const authenticator = new WalletAuthenticator({
wallet,
baseUrl: 'http://localhost:3000',
appInfo: {
name: 'My Simple Login App',
description: 'An app demonstrating a simple DID Connect login',
icon: 'https://arcblock.cn/images/brand/logo.png',
},
});
const handlers = new WalletHandlers({
authenticator,
tokenStorage: new SimpleStorage({ dbPath: '/tmp/did-connect.db' }),
});
const app = express();
// This is required if you want to use dynamic baseUrl inference
app.set('trust proxy', true);
// Attach the handler for the login flow
handlers.attach(app, {
// This defines the endpoint, e.g., /api/auth/profile
action: 'profile',
// Define the claims your application is requesting
claims: {
profile: () => ({
description: 'Please provide your name and email to log in.',
fields: ['fullName', 'email'],
}),
},
// This callback executes after the user approves the request in their wallet
onAuth: async ({ userDid, claims }) => {
const profile = claims.find((x) => x.type === 'profile');
console.log('Login successful:', { userDid, profile });
// Here you would typically:
// 1. Find or create a user in your database with the userDid.
// 2. Update their profile with the information from the claim.
// 3. Create a session for the user.
},
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
console.log(`Scan the QR code for the profile claim at http://localhost:${PORT}/api/auth/profile`);
});Code Explanation#
action: 'profile': This sets up the specific authentication route at/api/auth/profile. Your frontend will initiate the DID Connect session by targeting this endpoint.claims.profile: This is a function that returns the configuration for the Profile Claim.description: The text displayed to the user in their DID Wallet, explaining why the information is needed.fields: An array of strings specifying which profile fields to request. Common options includefullName,email,avatar,phone,birthday, andsignature.
onAuth: This is the most important callback. It runs only after the user has successfully scanned the QR code, approved the request, and submitted their information. Theclaimsparameter is an array containing the data shared by the user, which you can then use to complete the login process in your application.
User Experience Flow#
The interaction between the user, your application, and the DID Wallet follows a clear sequence. The diagram below illustrates this process from start to finish.
Next Steps#
With a basic login flow in place, you can explore more advanced scenarios.