Being able to use Ceramic directly from the convenience of your web browser is one of the core functionalities required to fulfill the vision of a permissionless dataweb. [**3ID Connect**](https://github.com/ceramicstudio/3id-connect?ref=blog.ceramic.network) enables this by providing a sandboxed IdentityWallet instance which users can authenticate to using any of their existing Ethereum wallets, and soon other Blockchain wallets as well. This tutorial will show you how to combine 3ID Connect with Ceramic in order to start building your app using dynamic, tamper resistant documents!

# Using Ceramic on the web

The [Typescript Ceramic implementation](https://github.com/ceramicnetwork/js-ceramic?ref=blog.ceramic.network) provides two main ways to interact with the ceramic network, **Ceramic Core** and **Ceramic http-client**. The former implements the entire protocol and relies on a _js-ipfs_ instance to be available, the latter relies on a _Ceramic Daemon_ which you can run from your terminal. Both of these implementations consume a **DID Provider** which is used to communicate with a wallet with DID support (see [EIP2844](https://eips.ethereum.org/EIPS/eip-2844?ref=blog.ceramic.network)). In the [Building on Clay tutorial](https://github.com/ceramicnetwork/js-ceramic?ref=blog.ceramic.network) we described how to use the http client together with an instance of [IdentityWallet](https://github.com/3box/identity-wallet-js/?ref=blog.ceramic.network). This is good if you want to dive into fundamentals, but **3ID Connect** enables us to connect to a DID directly from the comfort of your browser-based Ethereum wallet. This DID will also be linked together with the ethereum address using [IDX](https://idx.xyz/?ref=blog.ceramic.network).

In this tutorial we will be using Ceramic Core, which means that we’re running the entire Ceramic protocol inside of the browser!

# Setup 3ID Connect with Ceramic

First let’s install the needed packages. Currently the 3ID Connect version with Ceramic support is available using the `next` flag. In the example we will be using `ceramic-core`, but you can use `ceramic-http-client` as well.

```shell

```

Using 3ID Connect to authenticate to Ceramic is fairly straight forward once the basic flow is setup. In the example below we use an “injected ethereum provider” that’s available on `window.ethereum`. You can of course use any ethereum provider that you like.

```javascript

```

# Create documents in the browser

We can now start using Ceramic directly in the browser! Below are just some examples that you can also try out on the [Web Playground](https://ceramicstudio.github.io/web-playground/?ref=blog.ceramic.network) which comes with 3ID Connect and Ceramic already set up. First, open the developer console and then click connect. The 3ID Connect modal will appear, and once approved, you will see “Connected with DID: did:3:<yourDID>” in the console. Once this appears, then you can run the below commands directly in the console. Note, if you’d like to reset the 3ID Connect iFrame state, clear application data for 3idconnect.org from localStorage.

```javascript

```

* * *

That’s it for this tutorial! Hope you found it useful and thanks for reading. If you want to dive deeper have a look at the [js-ceramic Github repo](https://github.com/ceramicnetwork/js-ceramic?ref=blog.ceramic.network), and jump into our [Discord](https://chat.ceramic.network/?ref=blog.ceramic.network).