@internet-identity-labs/react-ic-ii-auth
v0.0.19
Published
React components to use DFINITYs Internet Identity and NFID Authentication
Downloads
18
Readme
react-ic-ii-auth
React components to use DFINITY Internet Identity Authentication
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:
- Safari currently prevents the iFrame to load properly because of an issue with the boundary nodes (out of our control).
- 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 to run this locally
Install within your own project
npm install --save @internet-identity-labs/react-ic-ii-auth
setup React IC II Auth to open auth flow within new tab
import React from 'react'
import {
InternetIdentityProvider,
useInternetIdentity
} from '@internet-identity-labs/react-ic-ii-auth'
const AuthButthon = () => {
const { authenticate, signout, isAuthenticated, identity } = useInternetIdentity()
console.log('>> initialize your actors with', { identity })
return (
<button onClick={isAuthenticated ? authenticate : signout}>
{isAuthenticated ? 'Logout' : 'Login'}
</button>
)
}
const App = () => {
return (
<InternetIdentityProvider
authClientOptions={{
onSuccess: (identity) => 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`
}}
>
<AuthButthon />
</InternetIdentityProvider>
)
}
export default App
open II within iFrame
import React from 'react'
import {
InternetIdentityProvider,
useInternetIdentity,
AuthIframe
} from '@internet-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 (
<>
<button onClick={isSafari ? handleAuth : authenticate}>
{isAuthenticated ? 'Logout' : 'Login'}
</button>
{/* THE IFRAME CURRENTLY IS NOT SUPPORTED ON SAFARI */}
{!isSafari && showModal && (
<div className="yourModalClass">
<AuthIframe src={identityProvider} onLoad={handleAuth} />
</div>
)}
</>
)
}
const App = () => {
return (
<InternetIdentityProvider
authClientOptions={{
onSuccess: (identity) => 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`
}}
>
<AuthButthon />
</InternetIdentityProvider>
)
}
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
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.
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