keywords
intermediate motoko authentication internet identity integrate auth user auth

Auth-client

View this sample's code on GitHub

This is an example project intended to demonstrate how a developer might integrate with Internet Identity.

:::info This example uses TypeScript. See an alternative vanilla JS example. :::

View a live demo of this sample.

This example shows how to use @dfinity/auth-client.

Setting up for local development

To get started, start a local dfx development environment in this directory with the following steps:

git clone https://github.com/dfinity/examples
cd examples/motoko/auth-client-demo/
dfx start --background --clean
dfx deps deploy
dfx deploy

This will deploy the vanilla JS (using lit-html) version of the application as well as Internet Identity and the whoami canister. You can access the canister using the link provided from running dfx deploy

Once deployed, start the development server with npm start.

You can now access the app at http://127.0.0.1:5173/.

Multiple versions

This demo has multiple versions, each of which demonstrates a different feature of the auth-client. npm start will run the vanilla JS version, but you can run the others by running npm run start:version where version is one of the following:

• React
• Vue
• Vanilla
• Svelte

Note: the svelte project was created using sveltekit, and has its own package.json. Cd into ./src/auth_client_demo_assets/svelte and run npm install to run the svelte version.

You can also deploy each of the frontend canisters by editing package.json to run the build:version script, and dfx.json to pull from the dist directory of that framework.

Pulling Internet Identity into your project

To pull Internet Identity into your project, you'll need to do the following:

• Step 1: Add Internet Identity to your dfx.json file:

"internet-identity" : {
    "type": "pull",
    "id": "rdmx6-jaaaa-aaaaa-aaadq-cai"
}

• Step 2: Run the following commands to install the dependencies:

dfx deps pull
dfx deps init --argument '(null)' internet-identity
dfx deps deploy