https://github.com/internet-identity-labs/react-ic-ii-auth

React components to use DFINITYs Internet Identity Authentication
https://github.com/internet-identity-labs/react-ic-ii-auth

internet-computer internet-identity react typescript

Last synced: 3 months ago
JSON representation

React components to use DFINITYs Internet Identity Authentication

• Host: GitHub
• URL: https://github.com/internet-identity-labs/react-ic-ii-auth
• Owner: internet-identity-labs
• License: mit
• Archived: true
• Created: 2021-10-08T17:26:53.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-15T12:29:15.000Z (over 2 years ago)
• Last Synced: 2024-07-28T10:11:10.105Z (3 months ago)
• Topics: internet-computer, internet-identity, react, typescript
• Language: TypeScript
• Homepage:
• Size: 3.9 MB
• Stars: 17
• Watchers: 3
• Forks: 1
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Contributing: docs/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-icp - InternetIdentityLabs/react-ic-ii-auth

README

        
# react-ic-ii-auth

---

## ⚠️ DEPRECATED ⚠️

use our npm package [@internet-identity-labs/react-ic-ii-auth](https://www.npmjs.com/package/@internet-identity-labs/react-ic-ii-auth) insead, which is part of the [NFID-SDK](https://github.com/internet-identity-labs/NFID-SDK)

---

> React components to use DFINITY Internet Identity Authentication

[![NPM](https://img.shields.io/npm/v/@identity-labs/react-ic-ii-auth.svg)](https://www.npmjs.com/package/@identity-labs/react-ic-ii-auth) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Usage and limitations

we provide two samples on how to integrate II into your app. The first one and most commonly used is, open II within a new browser tab. The second one is open II within an iFrame. This is our preferred integration. But there are some limitations to it:

1. Safari currently prevents the iFrame to load properly because of an issue with the boundary nodes (out of our control).

2. First time authentication doesn't work as the iFrame fails to trigger the secure device selection (No further information so far).

**we ship an example with this repo [check the example/README.md](./example/README.md) to run this locally**

## Install within your own project

```bash

npm install --save @identity-labs/react-ic-ii-auth

```

### setup React IC II Auth to open auth flow within new tab

```tsx

import React from 'react'

import {

  InternetIdentityProvider,

  useInternetIdentity

} from '@identity-labs/react-ic-ii-auth'

const AuthButthon = () => {

  const { authenticate, signout, isAuthenticated, identity } = useInternetIdentity()

  console.log('>> initialize your actors with', { identity })

  return (

    

      {isAuthenticated ? 'Logout' : 'Login'}

    

  )

}

const App = () => {

  return (

     console.log(

          ">> initialize your actors with", {identity}

        )

        // NOTE: Overwrite identityProvider in dev mode

        // defaults to "https://identity.ic0.app/#authorize"

        identityProvider: `http://${process.env.II_CANISTER_ID}.localhost:8000/#authorize`

      }}

    >

      

    

  )

}

export default App

```

### open II within iFrame

```tsx

import React from 'react'

import {

  InternetIdentityProvider,

  useInternetIdentity,

  AuthIframe

} from '@identity-labs/react-ic-ii-auth'

const AuthButthon = () => {

  const [showModal, setShowModal] = React.useState(false)

  const { authenticate, isAuthenticated, identity, identityProvider } = useInternetIdentity()

  // THE IFRAME CURRENTLY IS NOT SUPPORTED ON SAFARI

  const isSafari = navigator.userAgent.match(/(Safari)/)

  console.log('>> initialize your actors with', { identity })

  const handleAuthButtonClick = React.useCallback(() => {

    setShowModal(true)

  }, [])

  const handleAuth = React.useCallback(async () => {

    try {

      await authenticate()

    } catch (e) {

      console.error(e)

      setShowModal(false)

    }

  }, [authenticate])

  return (

    <>

    

      {isAuthenticated ? 'Logout' : 'Login'}

    

    {/* THE IFRAME CURRENTLY IS NOT SUPPORTED ON SAFARI */}

    {!isSafari && showModal && (

      


        

      

    )}

    >

  )

}


const App = () => {

  return (

     console.log(

          ">> initialize your actors with", {identity}

        )

        // NOTE: Overwrite identityProvider in dev mode

        // defaults to "https://identity.ic0.app/#authorize"

        identityProvider: `http://${process.env.II_CANISTER_ID}.localhost:8000/#authorize`

      }}

    >

      

    

  )

}

export default App

```

### run Internet Identity locally to use authenticated calls

In order to do authenticated calls against your local IC replica you need to run II locally.

[Read more how to setup II locally](./docs/setup-internet-identity.md)

## Identity Labs QA:

- [x] setup dependabot to keep dependencies up to date

- [x] setup unit testing pipeline

- [ ] setup e2e testing pipeline

## Issue Reporting and Contribution guidelines

please read our [contribution guidelines](./docs/CONTRIBUTING.md).

## Inspired by:

- https://github.com/dfinity/cancan/blob/031f31c0f45af72e42416043e1a2415642844d4e/src/utils/auth.tsx

- https://github.com/krpeacock/ic-avatar/blob/main/src/avatar_assets/src/hooks.ts

## License

[MIT © 2021 Internet Identity Labs, Inc](./LICENSE)