Connect2IC - Integrate any wallet or identity provider with just a few lines of code (React, Vue, Svelte)

Developers
1

Happy to announce my next project for the Internet Computer

It’s called Connect2IC. A frontend library / toolkit that makes it trivial to support any wallet & do authenticated calls to canister + other goodies.

Github:

Docs:

Here’s the prestyled dialog you get out of the box. You could also create your own btw.

image
image1200×812 92.9 KB

Check it out! It’s still early days & right now only supports React. But Svelte & Vue also coming soon.

Thanks also to AstroX for letting me work on it! I’ve joined them recently.

17 Likes
2

Quick, submit it to the hackathon under the Infrastructure track! /s

2 Likes
3

Hahah, hopefully it will be useful to the contestants at least.

4

Connect2IC has been listed in the Supernova Dev Resources under Authentication :clap:

5 Likes
5

Svelte support is out for Connect2IC!

npm i -S @connect2ic/core @connect2ic/svelte

While I’m working on the docs & full type support, you can see example usage here: https://github.com/Connect2IC/connect2ic/tree/main/examples/svelte

3 Likes
6

Some basic documentation for svelte: Getting started | Connect2IC

1 Like
7

Vue version is out!

npm i -S @connect2ic/core @connect2ic/vue

image
image1024×887 30.4 KB

Some initial docs:

Example app:

2 Likes
8

Did a presentation for Supernova.
You can watch me speedrun through the library and some of its functionality :slightly_smiling_face:
If you dont want to read the docs

3 Likes
9

Just released 0.1.0

  • The client can now be used outside of the supported frameworks
    Client | Connect2IC
  • Local development is now supported, see here how to configure each provider: Providers | Connect2IC
  • Lots of bug fixes. Should be much more stable now.
2 Likes
10

I’m getting some types incompatibility errors as I try to set connect2ic up in my project.

I’m defining the client like this:

const client = createClient({
  canisters: {
    puzzle: {
      canisterId,
      idlFactory
    }
  },
  providers: defaultProviders
})

At idlFactory I am getting this:

Type 'import("/home/enoch/REPOS/work_space/IC-Puzzle/node_modules/@dfinity/candid/lib/cjs/idl").InterfaceFactory' is not assignable to type 'import("/home/enoch/REPOS/work_space/IC-Puzzle/node_modules/@connect2ic/core/node_modules/@dfinity/candid/lib/cjs/idl").InterfaceFactory'.
  Types of parameters 'idl' and 'idl' are incompatible.
    Type '{ IDL: { Empty: import("/home/enoch/REPOS/work_space/IC-Puzzle/node_modules/@connect2ic/core/node_modules/@dfinity/candid/lib/cjs/idl").EmptyClass; Reserved: import("/home/enoch/REPOS/work_space/IC-Puzzle/node_modules/@connect2ic/core/node_modules/@dfinity/candid/lib/cjs/idl").ReservedClass; ... 24 more ...; Service...' is not assignable to type '{ IDL: { Empty: import("/home/enoch/REPOS/work_space/IC-Puzzle/node_modules/@dfinity/candid/lib/cjs/idl").EmptyClass; Reserved: import("/home/enoch/REPOS/work_space/IC-

And at “providers” I am getting this:

Type '(config: Config) => Provider[]' is not assignable to type 'IConnector[] | ((config: Config) => IConnector[])'.
  Type '(config: Config) => Provider[]' is not assignable to type '(config: Config) => IConnector[]'.
    Types of parameters 'config' and 'config' are incompatible.
      Type 'Config' is not assignable to type 'Config'. Two different types with this name exist, but they are unrelated.
        Types of property 'whitelist' are incompatible.
          Type 'string[] | undefined' is not assignable to type 'string[]'.
            Type 'undefined' is not assignable to type 'string[]'.ts(2322)
_app.tsx(83, 16): Did you mean to call this expression?

How can I fix this? I am using nextjs with Typescript.

11

Here’s a snippet of my package.json to overcome the candid version incompatibilities. You’ll likely need to clear your node_modules and clear your npm cache, then run npm install.

"dependencies": {
    "@connect2ic/core": "^0.1.1",
    "@connect2ic/react": "^0.1.0",
    "@dfinity/agent": "^0.11.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "@dfinity/agent": "^0.11.3",
    "@dfinity/auth-client": "^0.11.3",
    "@dfinity/authentication": "^0.11.3",
    "@dfinity/candid": "^0.11.3",
    "@dfinity/identity": "^0.11.3",
    "@dfinity/principal": "^0.11.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/node": "^20.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react": "^4.2.1",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "buffer": "^6.0.3",
    "dotenv": "^16.3.1",
    "typescript": "^5.3.3",
    "vite": "^5.0.11",
    "vite-plugin-environment": "^1.1.3"
  }
12

Okay thanks, Will it work with the latest @dfinity packages?

13

Project isn’t maintained anymore. It will not work with recent packages that I’ve found.

14

Ok, if you want latest connect2ic, this set of versions also works:

"dependencies": {
    "@connect2ic/core": "0.2.0-beta.24",
    "@connect2ic/react": "0.2.0-beta.24",
    "@dfinity/agent": "^0.15.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "@dfinity/agent": "^0.19.3",
    "@dfinity/auth-client": "^0.19.3",
    "@dfinity/authentication": "^0.14.2",
    "@dfinity/candid": "^0.19.3",
    "@dfinity/identity": "^0.19.3",
    "@dfinity/principal": "^0.19.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/node": "^20.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react": "^4.2.1",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "buffer": "^6.0.3",
    "dotenv": "^16.3.1",
    "typescript": "^5.3.3",
    "vite": "^5.0.11",
    "vite-plugin-environment": "^1.1.3"
  }