siwl-test

Sign in with Lit JavaScript SDK 🗝

Empower your users with decentralized self-custody through programmable key pairs (PKPs), without the complexity of private key management and without central parties.

The Sign in with Lit JavaScript SDK makes it easy to create and manage PKPs using intuitive and secure authentication flows like social and passwordless logins. Integrate this SDK in your web app to:

• 📲 Onboard users to web3 with Google OAuth, Discord OAuth, Ethereum wallets, and more*
• 🚀 Mint decentralized MPC wallets on-chain for users without worrying about gas fees
• ⚡️ Provide seamless, secure experiences in your app via session keys

*Email, passkeys, and decentralized multi-factor authentication coming soon!

⚠️ Important

This SDK is under active development, so this repo should be treated as a work in progress.

📜 API Reference

Explore all the methods available in this SDK here.

💻 Get Started

Installation

Install the NAME-TBD package and its peer dependencies.

npm install NAME-TBD @lit-protocol/lit-node-client ethers

Initialisation

First, you'll need an instance of LitNodeClient from the @lit-protocol/lit-node-client package to interact with the Lit nodes. Refer to the @lit-protocol/js-sdk API docs for configuration options.

import { LitNodeClient } from '@lit-protocol/lit-node-client';

const litNodeClient = new LitJsSdk.LitNodeClient({
  litNetwork: 'serrano',
  debug: false,
});

await this.litNodeClient.connect();

Next, create an instance of LitAuthClient to handle authentication for PKPs.

import { LitAuthClient } from 'NAME-TBD';

const litAuthClient = new LitAuthClient({
  // The domain of your web app
  domain: '<Your Domain>',
  // The URL of your web app where users will be redirected after authentication
  redirectUri: '<Your Redirect URI>',
  // Pass the LitNodeClient instance you created above
  litNodeClient: litNodeClient,
  relayConfig: {
    // Use Lit Relay Server to subsidize gas fees
    relayUrl: 'https://relay-server-staging.herokuapp.com',
    // Request an API key here: https://forms.gle/RNZYtGYTY9BcD9MEA
    relayApiKey: '<Your Lit Relay Server API Key>',
  },
});

Sign in with Google or Discord OAuth

Enable users to authenticate with their Google or Discord accounts and create PKPs that are securely owned by their social accounts.

Call the signInWithSocial method and pass in the name of the social login provider you want to use:

document.getElementById('social-login').addEventListener('click', () => {
  // Pass in 'google' to sign in with Google OAuth
  litAuthClient.signInWithSocial('google');
  // or pass in 'discord' to sign in with Discord OAuth
});

When clicked, users will be redirected to the social login page. Once users have successfully signed in, they will be redirected back to your web app.

Handling the OAuth Redirect

At the redirectUri specified in the LitAuthClient constructor, call handleSignInRedirect. This method confirms that the social login was successful and then creates a PKP for the user. Once the PKP is created, session signatures are generated and stored in the browser's local storage.

const sessionSigs = await litAuthClient.handleSignInRedirect({
  sessionParams: {
    chain: 'ethereum',
    // The resources the user can access with this session. See below for more details.
    resources: [`litAction://*`],
  },
});

Session signatures prove that the user has verified their ownership of a PKP and has granted permission to a specific set of resources that the PKP can be used to interact with. Refer to the Lit developer docs for the resources you can request.

You can also use isSignInRedirect method to check if the app is in the redirect state or not.

Sign in with Eth Wallet

Allow users to authenticate with their Ethereum accounts (externally-owned accounts) and create PKPs that are securely owned by their Ethereum accounts.

To verify that the user owns the Ethereum account, you will need to generate an AuthSig, or a message that has been signed by a wallet. The @lit-protocol/lit-node-client has a convenient method checkAndSignAuthMessage that connects to a wallet and requests a wallet signature.

Once you have the AuthSig, call the signInWithEthWallet method to mint a PKP and create session signatures.

import { checkAndSignAuthMessage } from '@lit-protocol/lit-node-client';

document.getElementById('wallet-login').addEventListener('click', async () => {
  // Request an AuthSig from the user's Ethereum wallet
  const authSig = await checkAndSignAuthMessage({
    chain: 'ethereum',
  });
  // Pass the AuthSig to the signInWithEth method
  const sessionSigs = await litAuthClient.signInWithEthWallet({
    authSig: authSig,
    sessionParams: {
      chain: 'ethereum',
      resources: [`litAction://*`],
    },
  });
});

Check out the @lit-protocol/js-sdk API docs for checkAndSignAuthMessage parameters.

Refer to the Lit developer docs for the session resources you can request.

Check Session

To check if a user has active session signatures, call the checkSession method.

const sessionSigs = await litAuthClient.checkSession();

If the session signatures have expired, the checkSession method will sign the user out and then return null. In this case, you can call the signIn method to start the authentication flow again.

Sign Out

To sign out a user, call the signOut method.

await litAuthClient.signOut();

signOut will remove user information from the browser's local storage.

Subscribe to Events

By subscribing to events, you can react to the user's authentication status and provide relevant responses.

litAuthClient.on('relayer_minting', () => {
  // Do your magic here
});

LitAuthClient emits the following events:

Event	Description
MINTING	Mint PKP through the relay server
POLLING	Poll mint status of PKP
MINTED	PKP has been minted successfully
HANDLING_REDIRECT	App is in redirect state
CREATING_SESSION	Session keys are being generated for a PKP
SESSION_CREATED	Session keys have been successfully created
SIGNED_OUT	User has signed out
ERROR	An error has occured

🙌 Contributing

We appreciate any feedback. Issues and pull requests are welcome!

Setup

After cloning the repo, install dependencies:

pnpm install

To build the package, run this command from the root of the repo:

pnpm build

Generating Docs

To generate the docs, run this command from the root of the repo:

pnpm run docs

🤝 Join the Community

Join our Discord to stay up to date on the latest developments, ask questions and get support, and engage with the wider community!