Connect2IC
A toolkit which makes it trivial to support any wallet or identity provider, and make authenticated calls to canisters.
Introduction
There are many new wallets coming out and adding support for these isn't always easy. Connect2ic allows you to get fully working auth for the most popular providers with only a few lines of code. Use the already styled useCanister() and useTransfer().
Full documentation
Visit https://connect2ic.github.io/docs/
Community
You can ask us questions directly :) https://discord.com/invite/4kqMVknpgZ
Supported providers
Packages
| package | description |
|---|---|
| @connect2ic/core | Client, connectors, assets and utilities |
| @connect2ic/react | React components & hooks |
| @connect2ic/vue | Vue components & composables |
| @connect2ic/svelte | Svelte components & stores |
React
Following these steps will give you fully working auth with a
1. Install the necessary packages
npm i -S @connect2ic/core @connect2ic/react
2. Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)
import { defaultProviders } from "@connect2ic/core/providers"
import { createClient } from "@connect2ic/core"
import { Connect2ICProvider } from "@connect2ic/react"
import "@connect2ic/core/style.css"
import * as counter from "canisters/counter"
const client = createClient({
canisters: {
counter,
},
providers: defaultProviders,
})
const AppRoot = () => (
<Connect2ICProvider client={client}>
<App />
</Connect2ICProvider>
)
3. Place the components
import { ConnectButton, ConnectDialog, Connect2ICProvider, useConnect } from "@connect2ic/react"
function App() {
const { isConnected, principal, activeProvider } = useConnect({
onConnect: () => {
// Signed in
},
onDisconnect: () => {
// Signed out
}
})
return (
<>
<ConnectButton />
<ConnectDialog dark={false} />
</>
)
}
4. Done
Vue
Following these steps will give you fully working auth with a
1. Install the necessary packages
npm i -S @connect2ic/core @connect2ic/vue
2. Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)
<script setup>
import { createClient } from "@connect2ic/core"
import { defaultProviders } from "@connect2ic/core/providers"
import { Connect2ICProvider } from "@connect2ic/vue"
import "@connect2ic/core/style.css"
import * as counter from "canisters/counter"
const client = createClient({
canisters: {
counter,
},
providers: defaultProviders,
})
script>
<template>
<Connect2ICProvider :client="client">
<App />
Connect2ICProvider>
template>
3. Place the components
<script setup>
import { ConnectButton, ConnectDialog, useConnect } from "@connect2ic/vue"
const { isConnected, principal, activeProvider } = useConnect({
onConnect: () => {
// Signed in
},
onDisconnect: () => {
// Signed out
}
})
script>
<template>
<div class="my-app">
<ConnectButton />
<ConnectDialog />
div>
template>
4. Done
Svelte
Following these steps will give you fully working auth with a
1. Install the necessary packages
npm i -S @connect2ic/core @connect2ic/svelte
2. Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)
<script>
import { createClient } from "@connect2ic/core"
import { defaultProviders } from "@connect2ic/core/providers"
import { Connect2ICProvider } from "@connect2ic/svelte"
import "@connect2ic/core/style.css"
import * as counter from "canisters/counter"
const client = createClient({
canisters: {
counter,
},
providers: defaultProviders,
})
script>
<Connect2ICProvider client={client}>
<App />
Connect2ICProvider>
3. Place the components
<script>
import { ConnectButton, ConnectDialog, useConnect } from "@connect2ic/svelte"
const { isConnected, principal, activeProvider } = useConnect({
onConnect: () => {
// Signed in
},
onDisconnect: () => {
// Signed out
}
})
script>
<div class="my-app">
<ConnectButton />
<ConnectDialog />
div>
4. Done
3 Aug 30, 2022
2 Mar 28, 2022
150 Dec 20, 2022
1 Dec 27, 2021
17 Oct 22, 2022
6 Jun 7, 2022
41 Dec 15, 2022
99 Jan 1, 2023
3 Feb 9, 2022
1 May 3, 2022
34 Dec 26, 2022
601 Dec 12, 2022
198 Dec 29, 2022
19 Nov 22, 2022
4 May 24, 2022
5.5k Jan 3, 2023
7 Apr 14, 2022
9 Nov 18, 2022
10 Oct 22, 2022