Civic Auth workshop - Marian Esco | Civic

Hey guys, happy to see you. Good vibes. Everybody's hyped and happy. I am Marian Esco, crypto esco with Civic. It's my pleasure to present you two of the bright minds that are working at Civic.

Daniel Keller, our CTO, and Tyrone Ait, our web3 solution architect and AI expert. Uh, a bit about Civic. Civic delivers onchain identity infrastructure that verifies humans and AI agents, protects against fraud and safeguards user privacy. Civic Odd offers universal single sign on supporting users with or without crypto wallets together with granular permissioning, verifiable credentials and bot resistance across leading blockchain networks. That's the pretty much the uh the most important thing what we do.

and Civic says the global standard for scalable privacy preserving digital identity. Let's talk a bit about what's happening today and then we'll have the pleasure to listen to our CTO going into some technical details. Okay, so why Civic O? Because you can do it in a quick setup. You can deploy in minutes with our SDK.

So in under five minutes you can integrate the odd solution to your application or smart contract. Then we have flexible SSO with Google, Discord, GitHub X, Facebook and others will come next. Optional embedded wallets supports for support for Solana, Ethereum and other EVM chains. flexible frameworks react neg and oidc or o 2.0 compliant client libraries.

Uh I think the devs understand this very much. Web 2 simplicity web3 compatible all in a familiar login experience. We also have a hackathon going on and we have a bounty a total of 1 $600 USDC will be awarded to three winners. First place 800, second place 500, third place 300. How to qualify?

Integrate Civic O into your application using the Civic O web3 SDK. You can also see it on the boot outside in the on the TV. Um the link you can come and talk to me after and u yeah I will guide you if you need guidance. Um, okay. You can create embedded wallets for users and then you need to show a working implementation or record a short demo video explaining how you use CVC in your application.

So if if you're showing a working implementation and how you did it, then that's enough. Uh, yeah, we want to see that evaluation criteria. The most important is the quality of the integration. It needs to be smooth, intuitive UX and properly implemented civic otoarket readiness. This is also important because it's yeah it's it's what we look for solves the real world need with a clear launch and adoption strategy.

So these two are the main important uh criterias. Then we have the use case that's creative and original concept with strong marketing potential and then uh the presentation which is clear engaging demo that effectively communicates the app's value. So yeah again I'll be here you can find me around and talk with me and u I will assist you with anything needed. Okay. Uh this is the intro.

I will let the bright brains uh demo a bit and talk about the technicalities and I think you're going to love this. Okay. So I will give the mic to Daniel our CTO.

Okay. Cool. Hey everyone. Uh hope you can hear me. I can't see you.

I I can only see Esco, but I assume that there's tons of you behind me or rather in front of Esco. Um, so I hope you can all hear me. Okay, we're going to do a quick demo um to show you how to integrate um the stuff that Esco just showed you. Um so let me share my screen. I like to do live demos because um something always goes weird and it's fun.

So let's see what weird thing happens today. Um we're going to be building a simple like um WagMe app. So if you don't know WagMe um it's one of the easiest ways to integrate with um with Civic, but it's not the only way. Um there's lots of documentation here on docs.cscivic.

comorth. What you're going to be looking for is these links down here on the bottom left. So the embedded wallets link, specifically the Ethereum link. And here you can see that there are examples um and uh in down in this section um for Wagmi if you're not using WagMe um it works especially well with VM by itself and it's also possible to uh to integrate with ethers and with a little bit more work probably everything else as well but contact us if you have if you have specific needs. Um the app that we're going to create um or that we're going to integrate or into more accurately is a very simple one.

So I've just rustled up some boiler plate here. Um so if you use if you're using WagMe, this is basically what you get if you use the create WagMe template. Um I just skipped that step for the demo because it takes a little bit of time to install all the dependencies and so on. And I added a little bit of CSS to make it look less horrible. And here's what we have.

So, we have a small UI which has some kind of status for your wallet. We don't have a wallet yet. That's what we're going to add. We're going to add the wallet basically. Therefore, because we don't have a wallet, we don't have a balance and we can't send a transaction yet.

But we want to get all these things wired up if we can and if we have time. So, um the first thing you need to do is um create an account with Civic. And you can do that just by going to orth.civic.com.

And when you sign in with orth.civic.com, civic.com. You'll be land you'll land onto the dashboard which is what what I'm showing here.

And the only thing you need to to know here is to take this client ID because that's what you're going to be putting into the environment variables of your app. And don't worry, it's not a secret. Um so it's okay that I'm sharing it here. Um you'll have your own one though. Uh so you use that one.

And then what we're also going to do in in this particular in integration is just going to be front site front end only. So we've got uh kind of a vit app um a react only app and so we're going to be using this is the only code snippet you basically need to add to add or into your application. Um if you're using a backend or if you're using as was quite common Nex.js then go back to the docs and take a look at this integration here. There's a few steps there's a few extra steps to get it working with the back end such as Nex.

js but they're all basically like um copy and paste. There's no real thinking required. Um the only thing I would say does need a bit of thinking is if you're using the web three case, you need to make sure to click on this tab and you import the or web 3 library rather than this tab where you're importing the or library. Right? That include that includes all the uh web 3 goodies um that you'll need specifically for a web 3 app.

So that's what I'm going to do now. So, I'm going to jump over to this window on the right and look at the code and start by just installing that um that dependency. And while that's downloading, I'll just quickly show you through the uh the codebase so you just have an idea of what I'm doing for the rest of it. So, this app is basically what you saw here, right? So, you can see the wallet, that's this component here.

Then you see the the balance, that's this one here. And then uh down here is the send transaction. Um so what we'll do first is we'll add civic to this. So if we hop up to to main, you can see I've got all these uh providers in place. This is these are kind of added by WagMe, right?

So we've got the WagMe provider, we've got the React query provider. We're going to add one more like I said in the docs like I said here, the civic or provider. And then again just be careful of the import here. This is can be a little bit tricky. So you want the default one.

You don't want the Nex.js one unless you're using Next.js. And then you need to add your um environment variable which I've put in here as V civic or client ID. So I believe in V that's import meta.

m civic or client ID. Something like that. And that's you're going to wrap your app with that, right? So, if you're familiar with React, you kind of know how that works. And that's that's it.

Now, you have orth and I can demonstrate that. Let's say we want to add to our app. We just want to say like add the sign-in button. There's a very useful um component that you can import um called user button. So, import that from web 3 and then go back to our app and you can see this sign in.

Okay. My my uh my CSS has given that a gray background. So if if I hadn't put that CSS in, it would look like this. And if you click on this, you can see now you already have orth integrated into your app. And these things here and these choices here and even the color scheme, they're influenced by the settings that you have in your in your dashboard.

So you can go back into your dashboard if you want and play around with the with the settings here and and beyond. Okay, I'm not going to bother with that right now. You can play around with that as you like. I'm just going to log in. And then this is if you were not using Wagny and you were just using beat, this would be kind of more or less what you all you need.

Yeah, sorry for the CSS messing this up, but this is effectively what you get here. You see I'm now logged in with my username. Um, I'm there's a couple of things you need to add now to the WagMe config so that WagMe picks up the the user and the wallet. So, if I go into my WagMe config here, you can see I've removed the connectors here. These are effectively the connections to wallets.

Um, so I'm I'm going to add the civic wallet here. Not all that code. Ignore that uh stuff. It's actually very much simpler than that embedded wallet. You don't need any config for it.

And then there's I think one extra step. This is the bit I always get confused about. There's one extra step that you need to do which is auto autoconnect. Now we have a hook for this. The details are in the uh in the the documentation as well.

It's as simple as use autoconnect. And you see that I've added that there. And it's automatically updated hotloaded my app. And we've got this connected wallet and we've got a balance. Okay.

I probably could do with trimming a few decimal places off here, but we've got a little bit of balance of uh ETH on the Solia chain. So, the chain is is uh as defined up here. Actually, there is one step that I do need again I forgot to mention here. If you want to fix it to a particular chain, you need to go into and specify the chain in the orth provider because civic or doesn't actually know by default what chain whackme is on. So, uh why I suggest creating the initial chain and then putting in here.

So that's it then. And uh I'll just reload this to get the uh it'll reload again in a minute. Okay, it's the same balancer. Yeah. So uh just to reiterate all those steps, um civic orth provider wrapped it around wrap it around your app.

Make sure to import the one from orth or web3 next.js if you're using next.js. If you're using re uh react then um add the client ID in here. Uh for next.

js the client ID goes somewhere else just to reiterate. So looking at the docs um in next.js the client ID goes into the next config. Um add your initial chain in my case it's wire it up to Wagme with this embedded wallet also imported from uh or web3 but this time forward/wag and then you've got everything. I'm going to try this is this could go I can't even copy and paste this.

Okay. Um, I don't really feel like messing around with a DOM and finding another wallet. So, you'll just have to trust me that this send transaction would work. But you can see already that it's wired up to the chain because it's look it's finding my balance in here. So, um, that's pretty much it.

Um, one extra thing I want to mention about the hackathon. Um so as as Scott mentioned in his presentation we are looking for you know um high quality secure integrations into apps but an extra category that I'm particularly interested in is tooling. So um not all the sources is open yet so it's a little bit difficult um but but I'm particularly interested in things that would make it easier for other people to integrate. Right? So I mentioned that for example if you're using WagMe and you're using VIT if you're using Nex.

js GS is super easy. How about if you're using ethers or if you're using some other um Ethereum library or if you're using some other web framework, it will be really cool if the community could provide um libraries to help with that as well. So I I I and the dev team will be in particular paying attention to those sort of integrations as well. But um basically the sky's is the limit. Uh you know uh use your imagination and uh reach out to us.

Um the easiest way to do that is via Discord. There's a link on civic.com. If you run into difficulty, we're very keen and willing to um to help anyone who is struggling with an issue. If there's something that's not clear in the docs, then let us know and we'll um do our best to help you with that.

And uh yeah, I think I think I'll leave it there. Um let's go back to you.

Thank you. Um, yeah. Ty, would you like to say a few words?

No, no. Everything went went very well. Nice. Really enjoyed it.

Was great.

Good. Uh, Dan, anything else to add?

No, I'm good. Just uh thanks very much everyone for your for your time and your attention and uh see you on the battlegrounds.