Git Product home page Git Product logo

krpeacock / auth-client-demo Goto Github PK

View Code? Open in Web Editor NEW
71.0 4.0 32.0 2.39 MB

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

Home Page: https://vasb2-4yaaa-aaaab-qadoa-cai.ic0.app/

CSS 42.11% TypeScript 5.92% HTML 3.33% JavaScript 44.22% Motoko 0.13% Vue 2.44% Svelte 1.84%
internet-computer authentication javascript

auth-client-demo's Introduction

Auth-Client Demo

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

For a non-typescript implementation, see https://github.com/krpeacock/auth-client-demo/tree/vanilla-js

Live demo

This is an example showing 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:

cd auth-client-demo/
dfx start --background --clean
dfx deps deploy
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

Pulling Internet Identity into your own project

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

  1. Add Internet Identity to your dfx.json file:
"internet-identity" : {
    "type": "pull",
    "id": "rdmx6-jaaaa-aaaaa-aaadq-cai"
}
  1. Run the following commands to install the dependencies:
dfx deps pull
dfx deps init --argument '(null)' internet-identity
dfx deps deploy

auth-client-demo's People

Contributors

krpeacock avatar peterpeterparker avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

auth-client-demo's Issues

No LOCAL_II_CANISTER variable on line 8 of webpack.config.js

The instructions say

Copy the canister ID fom the Internet Identity canister, and paste it into webpack.config.js in this project on the LOCAL_II_CANISTER variable on line 8.

but there's no such line there. It seems to have changed a few months ago but not sure how to fix it.

Error: error:0308010C:digital envelope routines::unsupported โ€” Failed to run scripts/build.: The custom tool failed.

When running II_FETCH_ROOT_KEY=1 II_DUMMY_CAPTCHA=1 dfx deploy --no-wallet --argument '(null)' I'm getting:

black@MacBook-Pro internet-identity % II_FETCH_ROOT_KEY=1 II_DUMMY_CAPTCHA=1  dfx deploy --no-wallet --argument '(null)'

Deploying all canisters.
All canisters have already been created.
Building canisters...
Executing 'scripts/build'
Compiling internet_identity frontend assets

> @dfinity/[email protected] build
> NODE_ENV=production npm run opts -- webpack --config-name app


> @dfinity/[email protected] opts
> NODE_OPTIONS='--loader ts-node/esm --experimental-specifier-resolution=node' "$@" webpack --config-name app

(node:29961) ExperimentalWarning: Custom ESM Loaders is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:29961) ExperimentalWarning: The Node.js specifier resolution flag is experimental. It could change or be removed at any time.
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/Users/black/icp/internet-identity/node_modules/webpack/lib/util/createHash.js:145:18)
    at BulkUpdateDecorator.update (/Users/black/icp/internet-identity/node_modules/webpack/lib/util/createHash.js:46:50)
    at RawSource.updateHash (/Users/black/icp/internet-identity/node_modules/webpack-sources/lib/RawSource.js:64:8)
    at NormalModule._initBuildHash (/Users/black/icp/internet-identity/node_modules/webpack/lib/NormalModule.js:868:17)
    at handleParseResult (/Users/black/icp/internet-identity/node_modules/webpack/lib/NormalModule.js:934:10)
    at /Users/black/icp/internet-identity/node_modules/webpack/lib/NormalModule.js:1026:4
    at processResult (/Users/black/icp/internet-identity/node_modules/webpack/lib/NormalModule.js:743:11)
    at /Users/black/icp/internet-identity/node_modules/webpack/lib/NormalModule.js:807:5
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/Users/black/icp/internet-identity/node_modules/webpack/lib/util/createHash.js:145:18)
    at BulkUpdateDecorator.update (/Users/black/icp/internet-identity/node_modules/webpack/lib/util/createHash.js:46:50)
    at RawSource.updateHash (/Users/black/icp/internet-identity/node_modules/webpack-sources/lib/RawSource.js:64:8)
    at NormalModule._initBuildHash (/Users/black/icp/internet-identity/node_modules/webpack/lib/NormalModule.js:868:17)
    at handleParseResult (/Users/black/icp/internet-identity/node_modules/webpack/lib/NormalModule.js:934:10)
    at /Users/black/icp/internet-identity/node_modules/webpack/lib/NormalModule.js:1026:4
    at processResult (/Users/black/icp/internet-identity/node_modules/webpack/lib/NormalModule.js:743:11)
    at /Users/black/icp/internet-identity/node_modules/webpack/lib/NormalModule.js:807:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Error: Failed while trying to deploy canisters.
Caused by: Failed while trying to deploy canisters.
  Failed to build call canisters.
    Failed while trying to build all canisters.
      The build step failed for canister 'renrk-eyaaa-aaaaa-aaada-cai' (internet_identity) with an embedded error: Failed to build custom canister internet_identity.: Failed to run scripts/build.: The custom tool failed.

After logout, login button has no click handler

Looks like init() needs to be called after rending content:

const init = async () => {
const authClient = await AuthClient.create();
if (await authClient.isAuthenticated()) {
handleAuthenticated(authClient);
}
renderIndex();
const loginButton = document.getElementById(
"loginButton"
) as HTMLButtonElement;
loginButton.onclick = async () => {
await authClient.login({
onSuccess: async () => {
handleAuthenticated(authClient);
},
});
};
};

(document.getElementById("logout") as HTMLButtonElement).onclick =
async () => {
await authClient.logout();
renderIndex();
};

Listen on externally accessible port

In testing II locally one would often want to test from another device on the same network. "localhost" is only accessible from the machine running auth-client.
If it were possible to have the server listen (either as an option or simultaneously) on 0.0.0.0 (i.e. 0.0.0.0:8080 in this case) then it would be much easier to test with multiple devices and this would greatly improve testing productivity.

Failed to assert source paths.: Unable to determine canonical location of asset source path /Users/black/icp/auth-client-demo/dist/auth_client_demo_assets/: No such file or directory (os error 2)

I'm getting this error on running dfx deploy

dfx deploy    

Deploying all canisters.
All canisters have already been created.
Building canisters...
Shrink WASM module size.
Executing 'bash -c 'test -f internet_identity.wasm || curl -sSL https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm -o internet_identity.wasm; test -f internet_identity.did || curl -sSL https://raw.githubusercontent.com/dfinity/internet-identity/main/src/internet_identity/internet_identity.did -o internet_identity.did''
Building frontend...
Error: Failed while trying to deploy canisters.
Caused by: Failed while trying to deploy canisters.
  Failed to build call canisters.
    Failed while trying to build all canisters.
      The post-build step failed for canister 'rrkah-fqaaa-aaaaa-aaaaq-cai' (auth_client_demo_assets) with an embedded error: Failed to assert source paths.: Unable to determine canonical location of asset source path /Users/black/icp/auth-client-demo/dist/auth_client_demo_assets/: No such file or directory (os error 2)

Need to clarify some text

Thanks for this @krpeacock .

A small issue with:

"Copy the canister ID fom the Internet Identity canister, and paste it into webpack.config.js in this project on the LOCAL_II_CANISTER variable on line 8.
Finally, cd back into the auth-client-demo directory and start the development server with npm start.
"

Because the last line says " cd back into the auth-client-demo directory" the reader assumes that the previous line when you said "this project" means that by "this" you are talking about internet-identity, but that is wrong (since it is the webpack.config of auth-client-demo you're talking about).

So I think it would have been clearer if it said something like:
"Copy the canister ID fom the Internet Identity canister and paste it into webpack.config.js of the auth-client-demo project on the LOCAL_II_CANISTER variable on line 8.
Finally, cd back into the auth-client-demo directory and start the development server with npm start."

403 response for authenticated call to local dfx host

I was having some trouble with using @dfinity/auth-client when running with local dfx tool and then stumbled upon this repo. It seems I am having the same issue when running this example auth client implementation.

The following call fails with 403 response in this sample application:

const response = await actor.whoami();

Error:

Error: Server returned an error:
  Code: 403 (Forbidden)
  Body: Failed to authenticate request

I am wondering if there is something I am missing.

Any help is greatly appreciated :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.