├── example ├── canister_ids.json ├── .env.local.template ├── src │ ├── react-app-env.d.ts │ ├── ui-lib │ │ ├── molecules │ │ │ ├── dfinity_icon.png │ │ │ ├── modal │ │ │ │ ├── header.tsx │ │ │ │ ├── close.svg │ │ │ │ └── index.tsx │ │ │ ├── internet-identity-auth │ │ │ │ └── index.tsx │ │ │ └── login.tsx │ │ ├── atoms │ │ │ ├── button │ │ │ │ ├── close.tsx │ │ │ │ └── index.tsx │ │ │ ├── loader │ │ │ │ └── index.tsx │ │ │ └── headlines │ │ │ │ └── index.tsx │ │ └── organisms │ │ │ └── navigation │ │ │ └── index.tsx │ ├── setupTests.ts │ ├── App.test.tsx │ ├── reportWebVitals.ts │ ├── ic-utils │ │ ├── create-actor.ts │ │ └── profile │ │ │ └── index.ts │ └── components │ │ └── auth-component.tsx ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── manifest.json │ └── icons │ │ └── close.svg ├── .babelrc ├── postcss.config.js ├── docker-compose.yml ├── scripts │ ├── dfx_run.sh │ ├── provision-linux.sh │ ├── entrypoint.sh │ └── dfxctl.sh ├── jest.setup.ts ├── next-env.d.ts ├── pages │ ├── _app.tsx │ └── index.tsx ├── .gitignore ├── dfx.json ├── ic │ └── profile │ │ └── main.mo ├── Dockerfile ├── makefile ├── tsconfig.json ├── tailwind.config.js ├── patches │ └── @dfinity+agent+0.10.0.patch ├── package.json ├── DOCKER_README.md ├── README.md ├── next.config.js └── jest.config.js ├── .travis.yml ├── src ├── react-app-env.d.ts ├── .eslintrc ├── setupTests.ts ├── modal.tsx ├── index.test.tsx └── index.tsx ├── .eslintignore ├── tsconfig.test.json ├── docs ├── assets │ └── images │ │ ├── contribution_cta.png │ │ └── table-of-contents.png ├── setup-internet-identity.md └── CONTRIBUTING.md ├── .prettierrc ├── .editorconfig ├── .github ├── workflows │ ├── provision-runner.sh │ ├── main.yml │ └── npm-release.yml ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md └── dependabot.yml ├── .gitignore ├── tsconfig.json ├── .eslintrc ├── LICENSE ├── package.json ├── README.md └── CODE_OF_CONDUCT.md /example/canister_ids.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/.env.local.template: -------------------------------------------------------------------------------- 1 | DFX_NETWORK=ic 2 | II_CANISTER_ID= -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 12 4 | - 10 5 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | dist/ 3 | node_modules/ 4 | .snapshots/ 5 | *.min.js -------------------------------------------------------------------------------- /example/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"], 3 | "plugins": ["@babel/plugin-transform-typescript"] 4 | } 5 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/internet-identity-labs/react-ic-ii-auth/HEAD/example/public/favicon.ico -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs" 5 | } 6 | } -------------------------------------------------------------------------------- /example/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /docs/assets/images/contribution_cta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/internet-identity-labs/react-ic-ii-auth/HEAD/docs/assets/images/contribution_cta.png -------------------------------------------------------------------------------- /docs/assets/images/table-of-contents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/internet-identity-labs/react-ic-ii-auth/HEAD/docs/assets/images/table-of-contents.png -------------------------------------------------------------------------------- /example/src/ui-lib/molecules/dfinity_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/internet-identity-labs/react-ic-ii-auth/HEAD/example/src/ui-lib/molecules/dfinity_icon.png -------------------------------------------------------------------------------- /example/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '2.1' 2 | 3 | services: 4 | dfx: 5 | build: . 6 | ports: 7 | - 8000:8000 8 | 9 | volumes: 10 | - ./scripts:/scripts 11 | -------------------------------------------------------------------------------- /example/scripts/dfx_run.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh -l 2 | dfx start --background --clean & 3 | sleep 5 4 | II_ENV=development dfx deploy --no-wallet --argument '(null)' 5 | echo 'Enter to infinity loop' 6 | sleep infinity 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "jsxSingleQuote": true, 4 | "semi": false, 5 | "tabWidth": 2, 6 | "bracketSpacing": true, 7 | "arrowParens": "always", 8 | "trailingComma": "none" 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [makefile] 12 | indent_style = tab 13 | -------------------------------------------------------------------------------- /example/jest.setup.ts: -------------------------------------------------------------------------------- 1 | // jest.setup.ts 2 | import '@testing-library/jest-dom' 3 | 4 | // https://stackoverflow.com/questions/68468203/why-am-i-getting-textencoder-is-not-definedin-jest 5 | import { TextEncoder } from 'util' 6 | global.TextEncoder = TextEncoder 7 | -------------------------------------------------------------------------------- /example/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom' 6 | -------------------------------------------------------------------------------- /example/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/basic-features/typescript for more information. 7 | -------------------------------------------------------------------------------- /.github/workflows/provision-runner.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | set -ex 4 | 5 | # Enter temporary directory. 6 | pushd /tmp 7 | 8 | # Install Node. 9 | sudo bash example/scripts/provision-linux.sh 10 | 11 | # Set environment variables. 12 | echo "$HOME/bin" >> $GITHUB_PATH 13 | 14 | # Exit temporary directory. 15 | popd 16 | -------------------------------------------------------------------------------- /example/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import { AppComponent } from "next/dist/shared/lib/router/router"; 2 | import "tailwindcss/tailwind.css"; 3 | 4 | const GetImpactNow: AppComponent = ({ Component, pageProps }) => { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | }; 11 | 12 | export default GetImpactNow; 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # builds 7 | build 8 | dist 9 | .rpt2_cache 10 | 11 | # misc 12 | .DS_Store 13 | .env 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: [pull_request, push, workflow_dispatch] 3 | jobs: 4 | test: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - uses: actions/checkout@v2 8 | - name: Provision Linux 9 | run: bash example/scripts/provision-linux.sh 10 | - name: Install modules 11 | run: yarn 12 | - name: Run tests 13 | run: yarn test 14 | -------------------------------------------------------------------------------- /example/src/ui-lib/molecules/modal/header.tsx: -------------------------------------------------------------------------------- 1 | import { CloseButton } from "src/ui-lib/atoms/button/close"; 2 | 3 | interface ModalHeaderProps { 4 | onClose: () => void; 5 | } 6 | 7 | export const ModalHeader: React.FC = ({ onClose }) => ( 8 |
9 |
10 | Login 11 |
12 | 13 |
14 | ); 15 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect' 6 | import '@testing-library/jest-dom' 7 | 8 | // https://stackoverflow.com/questions/68468203/why-am-i-getting-textencoder-is-not-definedin-jest 9 | import { TextEncoder } from 'util' 10 | global.TextEncoder = TextEncoder 11 | -------------------------------------------------------------------------------- /example/src/ui-lib/atoms/button/close.tsx: -------------------------------------------------------------------------------- 1 | interface CloseButtonProps { 2 | onClose: () => void; 3 | } 4 | 5 | export const CloseButton: React.FC = ({ onClose }) => ( 6 | 17 | ); 18 | -------------------------------------------------------------------------------- /example/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render, waitFor } from '@testing-library/react' 3 | import App from '../pages' 4 | 5 | jest.mock('.dfx/local/canisters/profile/index.js', () => ({ 6 | createActor: jest.fn() 7 | })) 8 | jest.mock('src/ic-utils/create-actor', () => ({ 9 | createActor: jest.fn() 10 | })) 11 | 12 | test('renders learn react link', async () => { 13 | const { getByText } = render() 14 | 15 | await waitFor(() => { 16 | expect(getByText(/Login Modal/i)).toBeInTheDocument() 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /example/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | // TODO: fix this 2 | // eslint-disable-next-line no-unused-vars 3 | import { ReportHandler } from 'web-vitals' 4 | 5 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 6 | if (onPerfEntry && onPerfEntry instanceof Function) { 7 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 8 | getCLS(onPerfEntry) 9 | getFID(onPerfEntry) 10 | getFCP(onPerfEntry) 11 | getLCP(onPerfEntry) 12 | getTTFB(onPerfEntry) 13 | }) 14 | } 15 | } 16 | 17 | export default reportWebVitals 18 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # DFINITY 15 | .dfx 16 | internet-identity 17 | 18 | # NEXT.JS 19 | .next 20 | out 21 | 22 | # misc 23 | .DS_Store 24 | .env.local 25 | .env.development.local 26 | .env.test.local 27 | .env.production.local 28 | 29 | npm-debug.log* 30 | yarn-debug.log* 31 | yarn-error.log* 32 | 33 | # local environment config (see .env.template) 34 | .env 35 | -------------------------------------------------------------------------------- /example/scripts/provision-linux.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | set -ex 4 | 5 | # Enter temporary directory. 6 | pushd /tmp 7 | 8 | # Install Node. 9 | curl -o install-node.sh "https://deb.nodesource.com/setup_14.x" 10 | sudo bash install-node.sh 11 | sudo apt-get install --yes nodejs 12 | rm install-node.sh 13 | 14 | # Install DFINITY SDK. 15 | DFX_VERSION=0.8.1 sh -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)" 16 | 17 | 18 | # Install Rust 19 | curl --proto '=https' --tlsv1.2 -o rustup.sh -sSf https://sh.rustup.rs 20 | bash rustup.sh -y 21 | 22 | 23 | # Exit temporary directory. 24 | popd 25 | -------------------------------------------------------------------------------- /example/dfx.json: -------------------------------------------------------------------------------- 1 | { 2 | "canisters": { 3 | "profile": { 4 | "main": "ic/profile/main.mo", 5 | "type": "motoko" 6 | }, 7 | "assets": { 8 | "dependencies": ["profile"], 9 | "ui": { 10 | "entrypoint": "out/index.html" 11 | }, 12 | "source": ["out/"], 13 | "type": "assets" 14 | } 15 | }, 16 | "defaults": { 17 | "build": { 18 | "packtool": "" 19 | } 20 | }, 21 | "dfx": "0.8.1", 22 | "networks": { 23 | "local": { 24 | "bind": "127.0.0.1:8000", 25 | "type": "ephemeral" 26 | } 27 | }, 28 | "version": 1 29 | } 30 | -------------------------------------------------------------------------------- /example/src/ui-lib/organisms/navigation/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | interface NavigationProps { 4 | staticBackground?: boolean 5 | } 6 | 7 | export const Navigation: React.FC = () => { 8 | return ( 9 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /example/ic/profile/main.mo: -------------------------------------------------------------------------------- 1 | import Principal "mo:base/Principal"; 2 | 3 | shared (install) actor class ProfileActor () { 4 | 5 | let admin = install.caller; 6 | 7 | // Return the principal identifier of the wallet canister that installed this 8 | // canister. 9 | public query func installer() : async Principal { 10 | return install.caller; 11 | }; 12 | 13 | // Return the principal identifier of the caller of this method. 14 | public shared (message) func whoami() : async Principal { 15 | return message.caller; 16 | }; 17 | 18 | // Return the principal identifier of this canister. 19 | public func id() : async Principal { 20 | return await whoami(); 21 | }; 22 | 23 | }; -------------------------------------------------------------------------------- /example/scripts/entrypoint.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh -l 2 | 3 | echo Creating deployer directory 4 | 5 | mkdir ~/.config 6 | mkdir ~/.config/dfx 7 | mkdir ~/.config/dfx/identity 8 | mkdir ~/.config/dfx/identity/default 9 | 10 | echo Adding identity.pem and wallets file file 11 | 12 | echo $INPUT_IDENTITY > ~/.config/dfx/identity/default/identity.pem 13 | sed -i 's/\\r\\n/\r\n/g' ~/.config/dfx/identity/default/identity.pem 14 | echo $INPUT_WALLETS > ~/.config/dfx/identity/default/wallets.json 15 | 16 | which dfx 17 | 18 | echo "Path:" 19 | 20 | echo $PATH 21 | 22 | echo "Deploying to the IC" 23 | 24 | dfx deploy --network=$INPUT_NETWORK $INPUT_DFX_PARAMS 25 | 26 | # dfx start --background --host 0.0.0.0:8000 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: 'npm' # See documentation for possible values 9 | directory: '/' # Location of package manifests 10 | schedule: 11 | interval: 'daily' 12 | - package-ecosystem: 'npm' # See documentation for possible values 13 | directory: '/example' # Location of package manifests 14 | schedule: 15 | interval: 'daily' 16 | -------------------------------------------------------------------------------- /example/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM ubuntu:20.04 2 | 3 | ENV DEBIAN_FRONTEND=noninteractive 4 | ENV TZ=Europe/Amsterdam 5 | 6 | RUN apt-get update \ 7 | && apt-get install -y \ 8 | curl \ 9 | git \ 10 | unzip \ 11 | sudo \ 12 | build-essential \ 13 | cmake \ 14 | && apt-get clean \ 15 | && rm -rf /var/lib/apt 16 | 17 | ADD ./scripts /scripts 18 | 19 | RUN cp /scripts/dfxctl.sh /usr/bin/dfxctl \ 20 | && chmod +x /usr/bin/dfxctl 21 | 22 | RUN /scripts/provision-linux.sh 23 | 24 | RUN git clone https://github.com/dfinity/internet-identity.git 25 | 26 | ENV DFX_PROJECTS_DIR=/Projects 27 | 28 | WORKDIR internet-identity 29 | 30 | RUN npm install 31 | 32 | CMD /scripts/dfx_run.sh 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/modal.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | interface AuthIframeProps 4 | extends React.DetailedHTMLProps< 5 | React.IframeHTMLAttributes, 6 | HTMLIFrameElement 7 | > { 8 | src: string 9 | onLoad: () => void 10 | } 11 | 12 | export const AuthIframe: React.FC = ({ 13 | src, 14 | onLoad, 15 | title = 'idpWindow', 16 | name = 'idpWindow', 17 | width = '100%', 18 | height = '100%', 19 | allow = 'publickey-credentials-get', 20 | ...props 21 | }) => { 22 | return ( 23 |