https://github.com/krpeacock/auth-client-demo

Example demo of how to use https://www.npmjs.com/package/@dfinity/auth-client to make authenticated calls to an IC app
https://github.com/krpeacock/auth-client-demo

authentication internet-computer javascript

Last synced: about 2 months ago
JSON representation

Example demo of how to use https://www.npmjs.com/package/@dfinity/auth-client to make authenticated calls to an IC app

• Host: GitHub
• URL: https://github.com/krpeacock/auth-client-demo
• Owner: krpeacock
• Created: 2021-05-07T00:17:38.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-20T18:39:15.000Z (3 months ago)
• Last Synced: 2024-06-21T18:08:53.430Z (3 months ago)
• Topics: authentication, internet-computer, javascript
• Language: JavaScript
• Homepage: https://vasb2-4yaaa-aaaab-qadoa-cai.ic0.app/
• Size: 2.92 MB
• Stars: 71
• Watchers: 4
• Forks: 32
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-icp - krpeacock/auth-client-demo - client to make authenticated calls to an IC app (Front-end)

README

        
---

keywords: [intermediate, motoko, authentication, internet identity, integrate, auth, user auth]

---

# Auth-client 

[View this sample's code on GitHub](https://github.com/dfinity/examples/tree/master/motoko/auth_client_demo)

This is an example project intended to demonstrate how a developer might integrate with [Internet Identity](https://identity.ic0.app).

:::info

This example uses TypeScript. See an alternative [vanilla JS example](https://github.com/krpeacock/auth-client-demo/tree/vanilla-js).

:::

[View a live demo of this sample](https://vasb2-4yaaa-aaaab-qadoa-cai.ic0.app/).

This example shows how to use [@dfinity/auth-client](https://www.npmjs.com/package/@dfinity/auth-client).

## Setting up for local development

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

```bash

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:

```json

"internet-identity" : {

    "type": "pull",

    "id": "rdmx6-jaaaa-aaaaa-aaadq-cai"

}

```

- #### Step 2: Run the following commands to install the dependencies:

```bash

dfx deps pull

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

dfx deps deploy

```