Next & Hasura & SIWE Template

All right, here we go. GM, GA, GE everybody. Welcome to what's going to be another great DevNTell. So if you didn't know, DevNTell is a 30-minute window for members of the DAO to showcase something they're passionate about or have been working on.

This can be an awesome project you've been working on, demonstrating unit testing best practices, automation goodies, smart contracts, how to structure a project, etc. Basically, if you've got a passion for something, this is your opportunity to share it with the community.

And today, I am happy to introduce to you Scott, who will be sharing with us his template built with Next, Hasura, and Sign-In with Ethereum. Take it away, Scott.

Thanks, thanks Narb. Yeah, thanks for having me. So I've been hacking on different things throughout the space. I've been around crypto since 2015 and hacking on things like PoolTogether and RabbitHole since 2018, 2019.

I'm just really passionate about building cool shit and I've been trying to figure out the best way to really interact with an API backend and kind of take a lot of that load off.

So I'm going to share with you guys today a little bit about this template that I've been hacking on, basically using a tool called Hasura, which makes a GraphQL API out of a database that you give it, and then putting Next in the frontend and using Sign-In with Ethereum to kind of authenticate with that database.

And so I wrote up a little post here, so I'll share this in the chat and you can check out the whole tutorial. We won't go through the whole thing now, just to keep things brief, but I'll kind of give you like a high-level as to what's going on.

Just quickly, there's also the GitHub repo where you can check out the actual template itself and just clone it and start working from kind of a fresh backend that gives you a little user model and then you can start picking out the things that you want to build on top of it without having to really think about the backend besides just the modeling and some of the basic SQL stuff that Hasura will help you out with.

We'll get into Hasura a little bit more, we'll kind of just jump through this setup really quick and then kind of talk about the high level of how you can kind of get rolling with it. So in the overview, we're setting up some basic environment stuff for the whole package. We're going to use NX for our monorepo so that we can kind of keep all of our dependencies clean.

And then a lot of it relies on Docker to be able to run Hasura and the other services for the database locally. You can definitely spin them up individually, but I just find it a lot easier to use Docker. So those are kind of the recommended dependencies to get started.

So we fill out some environment variables, these are all kind of like basic local variables that get you started with your localhost and ports and stuff like that. You'll want to like customize your password and stuff like that when you go to a production environment, but these will get you started right away. They're all in the example here as well, so you can just clone it out of there.

After that, we've got like the Docker file, so just setting up the different components for the backend. So you've got a container for the database, which we're just running on top of Postgres, and then we spin up the GraphQL engine, the Hasura engine, that maps that API to it. You pass in the database string so it knows where to find your database.

And then Hasura likes to work inside of its own directory, it'll set up the migrations and metadata and some other config for you. So when you initialize that folder in here for Hasura init, it will create those initial files for you. We went one step further in this template to actually give you a couple of default things that give you a little user table to get started and then you can really start to branch off from there to your other migrations that you want to add.

So then we'll move into the frontend, spinning up like a Next install for that, where we're mostly just referring from the Next Sign-In with Ethereum example to pull in a lot of this. We'll set up Chakra for some styling and then set up Wagmi and RainbowKit, which are awesome tools to leverage.

I think my edition is already out of date because we're up to version like 0.7 and I think this was built with 0.4, so I need to go back and revise a little bit on setting up these clients, but they've changed minimally, just updating how you access some of these default wallets and stuff.

So you pass in those providers as well, and we'll pass in a little custom connect button. So that passes us into setting up Hasura. And so there's a lot of different resources I tried to link out to here for getting deep into Hasura.

I'll just give a quick overview. When you log into the console, it'll give you your GraphQL endpoint and kind of passes your default authentication stuff in here so you can see all of the introspection. So this is the one that I'm using for Web3Talks that we'll talk about at the end here.

But this is all the different tables, the aggregate counts that you can pull for different things, and getting like a specific one by an individual identifier. So you can just start adding things to the GraphQL interface, it'll start pulling those in. You can easily run the different queries.

And then you can check out the actual underlying data with the databases that have been connected. Once you pass in that default string, it'll automatically hook that up for you. And then it'll ask you, you can come in and start creating tables if you don't have any tables.

If you do have some tables, you can come in and view the rows, you can insert a row. If you want to add columns and stuff like that, this is kind of the same interface that you'll run into when you set up a new table. You can add different types of columns, they'll have like a couple of frequently used columns that you might want to use, and then you can set all the different properties.

It'll run the SQL underneath and then it'll save it again in that migrations folder so that if anybody else tries to get caught up with your database, it'll be in line. The last thing to mention here is just like the permissions, so you can set up different permissions that we'll touch on when we set up the Next auth stuff.

So you can pass in like I'm using public for the unauthenticated user and a couple of other different statuses for who can insert and select and update things in this database. So you can kind of make a lot of those business rules without having to do much code then.

That's kind of a quick crash course on Hasura. I guess I'll pause really quick to see if there's any questions on Hasura or getting that first few pieces put up.

So I guess on the Hasura part, so basically if I understand correctly what it does is it introspects your SQL-based database and creates a GraphQL API on top of that?

Yeah, exactly, exactly. And so when it introspects that, some of those things will come in here and pop up as untracked tables or untracked relationships. If you add a new relationship between a couple of tables, it'll suggest that you start tracking that and then it adds it to the Hasura metadata and yeah, spins up the whole GraphQL components for you.

And does it also give you authentication as well?

We'll talk about the authentication, but it's built-in with how Hasura does JWTs. So we can dive into that here with the NextAuth. So we're going to hook up NextAuth, which is a nice library for handling authentication with Next frontends, and then Sign-In with Ethereum is the library for spinning up the messages, which makes those really clean for the user.

For NextAuth, we just need to pass in a provider around everything and some default variables. Again, we want to like customize this so it's actually secret when you push to a live environment, but we'll just do some default. NextAuth works from an API endpoint where it handles all the different authentication requests.

And we can get a lot of this from this Sign-In with Ethereum example that they used for NextAuth. And basically we're spinning up a similar credentials provider that they used with this message and signature. And then when we pass it into this authorize function that they use, we're just going to go and make sure that that is a valid signature for that address and then those get passed through in some of their callbacks and stuff like that, and then we can set up a session for that user.

So that's where all the authentication is happening. The important piece in the... oh, I'll get it down here. Connect to Hasura here. So we're going to update how we're passing the token. We're going to get the token out of passing the token into this whole Apollo Client thing.

We're going to pass the token that we get from the NextAuth. Here's the updated NextAuth. So we're going to go and look to see if there's a user inside the database. If there is, we will pass that user back. And then this is the Hasura JWT claims.

So they're basically asking you to pass it in kind of like a specific way so that they can look and see these Hasura objects. And so if you pass in a user ID, it'll check to make sure that that user exists in the database. If you pass roles to this, then it'll give those different roles that we talked about earlier in the permissions. So if you pass in user, it'll have user permissions. The default would be whatever the authenticated role is. And then you, as this authentication endpoint, can check to see different rules to see if they should be upgraded from whatever the unauthenticated rule is.

Does that make sense kind of how that authentication piece is happening with Hasura?

Yeah, makes sense to me.

Cool. Nice. So the things that I skipped over was just customizing this connect button. So basically you can use RainbowKit's default connect button. It looks like they added an authenticated status, so I want to check out what that looks like. But we just built this custom connect button so that we could handle the authentication piece and make it really obvious that someone's logged out.

I'll show it on Web3Talks. So basically built this little tool alongside this template to kind of prove out the use case, trying to figure out how to make this work. I love watching the conferences and I'm glad that all of our like educational content that comes out of there is all on YouTube.

It's just kind of difficult to like parse and figure out which places has the best talks. You either have to know the speaker or be very passionate about the topic or see that it has a lot of views, and there's just not like a good optimized way to do that. So I've been chatting with different friends about making a tool like this that kind of categorizes a lot of the different talks. It's just a very basic version because I really wanted to get this authentication piece, but it's just been kind of a useful tool as well, so thinking about building it out some more.

So the custom connect button is here. Basically we swapped out the default RainbowKit button for a custom button. It allows us to do the signature... oh, it's going to be broken now. Maybe I'm on the wrong chain. Oh, I must have introduced a bug when I was messing with it earlier.

I was trying to fix some unauthenticated stuff so that I could have these conferences show up because I had a permissions issue earlier, but I must have broke something with the signature. So it's not going to let me sign in unfortunately. But basically wanted to categorize a lot of the different talks that we had.

And then the custom connect button allows us to really have this kind of clearly 'you're signed out'. When you're signed in, it turns green and then these buttons would turn into like add a new conference or add a new talk on the other spot. I think those are the major... yeah, you can see the version of the logged in here where it shows their profile.

You could go to like a profile page and then the clear green box that they're logged in. The rest of this is just the Hasura connection and then just giving you a little bit of a heads up on like how you can go and use that session token later as a part of your query so that you make sure that Hasura knows that you're authenticated.

There's a couple of extra bonus things that we can revisit if necessary. The big thing that's different in the template is just adding that default users table. So yeah, definitely check out the template, let me know if you have any questions, feel free to drop an issue in there.

I'll go back to the kind of talks stuff. I've been just yeah hacking on this since I figured out the authentication component, trying to figure out how best to kind of categorize some of these. So as a user, if you could go sign in, you would be able to go and become a community member where we're just running a check to see if you're in a handful of communities.

And Developer DAO is one of those communities, so you'll be able to like register as a community member and go and upvote and submit talks. Other than that, I can find folks that are interested in kind of helping me curate some of these for folks that are interested in getting in the space and looking for good content because there's a lot of good content that comes out of these talks or out of these conferences. So yeah, definitely excited to go back and rewatch a lot of the Devcon stuff.

So is it when if if I were to sign in with Ethereum would it be able to tell that I'm a Developer DAO member for example by scanning the wallet?

Yeah, yeah, exactly. So if you signed in and I have like a little profile button like this, so you go to your profile and it says like 'check to see if you're a community member'. And if you are a community member, which yeah if you're a DD member, then it would mark that you're a community member and you're able to add talks and upvote and stuff.

Neat, neat, awesome. And how how long have you been working or hacking away at this if I may ask?

Yeah, just a couple months, like really off and on, just really initially figure out the authentication piece and then kind of figured that this would be kind of useful. I was going to show because I have a friend that's been kind of working on some different iterations. So like I was kind of embarrassed to show the current iteration because I'm really excited about kind of what this could potentially look like. So I've been trying to figure out if I should go and get a grant and keep working on it or find some folks that want to collaborate on it. So yeah, this is kind of what we're looking at for like a Next iteration for the look and feel.

Yeah, that's awesome man. Yeah, yeah, I would encourage you to go at least try to get a grant. I would be surprised if you were denied. This is a really awesome tool and especially for two months of work, that's pretty awesome. And I must say kudos to your very thorough documentation. It's very much needed in our space. So it's great to be a working example of what to do versus what not to do. So good on you.

Thanks man, appreciate it. That was what I had for today. I'm happy to open it up for any questions about Web3Talks or the template. I'll share the tool again in like one of the general channels if I can get the authentication working again today. There was like a Wagmi bug that was not letting me build a production build on the newest version so I tried bumping back a few versions but didn't try anything besides just my general authentication so I'll have to go back and check that out.

It wouldn't be right, it wouldn't be right if there wasn't a bug, so...

Yeah, exactly, exactly. Crowd, any questions for Scott?

I just had a question about the Hasura. What's been your experience overall with the GraphQL and getting all that running? It looks like a lot to run, but it seems like it's paid off. I guess are you still going with that?

Yeah, exactly. Like there's a little bit of setup, but definitely like once you get it going, you don't have to mess with it too much and it's a matter just a matter of like if you want to add a new table you can do it here or you can do it as a separate migration just inside of the Hasura migrations and then you can run the Hasura commands to actually run those migrations. I've I'm just got it running usually in in Docker so I can just like spin it up pretty quickly with just like a compose start and then it's just always in the background. The cool thing with that I've been updating with some help from some friends is moving to React Query which is pretty slick allowing yeah basically the... oh I think I am in the wrong one... basically allowing you to like invalidate the hooks and stuff using some pretty slick hooks and you just have to go in and invalidate this on the React Query client. So yeah definitely loving the GraphQL as far as that goes, excited to figure out the mutations around that because yeah definitely updating after doing mutation is pretty frustrating so...

I've used React Query with REST services which is really nice. So are you saying it also supports GraphQL directly?

And honestly you can basically pass anything into this function, right? So we're just passing this function into this useQuery and it it can handle basically anything. And so we're just running this GraphQL underneath underneath the hood here but you could really pass anything to it. Yeah like you said.

Oh that's really cool. Yeah thank you.

Yeah, great great question Brian. Question for me, so you mentioned that you wanted some help and hands on pushing the project forward. Is there anything in particular you're looking for or how how can people get started if they are interested?

I need to open source the current version of the Web3Talks but would love anybody that's excited about kind of that Next iteration that might be interested in collaborating. Yeah definitely reach out and I'll see how I can get you in in touch. The code's fairly straightforward so hopefully could get up to speed pretty quickly and and it's all using Chakra so if you're pretty familiar with Chakra it's just a lot of skinning components hopefully kind of reorganizing stuff. But yeah definitely would love any contributions and to collab with folks. Even just going in and voting once I can get the authentication working again I would love just some votes. So that would be my big call to action I guess is just would really appreciate if you can go and vote on some talks that you like or submit a couple of conferences or talks. I'm going to work with some other folks to get more talks submitted but yeah would love your votes on on some of your favorites so we can really make it a useful tool.

Oh yeah 100%. And there's a lot of folks in the DAO that regularly attend conferences so you're you're in the right place to gather that data. Exactly. Excited for Web3Con, get the talks up from Web3Con. Oh yeah there you go there you go. I think yeah that would be perfect for a guinea pig for sure. But yeah this this has been awesome man. Are there any final questions here from the crowd? Going once. Going twice. Sold! All right. Well thank thank you again Scott for coming on and sharing your awesome work. Really looking forward to seeing the project grow here.

And yeah with that want to wish everybody a very happy Friday or happy weekend wherever you may be and that will see you back here next week. And be on the lookout for the POAPs which I will drop in the chat very soon and in the general chat. And yeah hope you have a wonderful rest of your day.

Yeah thank you Scott and Narb, really appreciate it. My pleasure. Yeah cheers. Thank you. All the best. See ya.