Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 (4 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
[](https://www.npmjs.com/package/@identity-labs/react-ic-ii-auth) [](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)