Signin & Signup with Stack Auth

[00:00:00]
>> Brian Holt: We're going to start now building out kind of like backend pieces here of like how I would go about rolling out a new app for my company, right? So at this point you need to decide like, what database do I want to use, what auth do I want to use, what Reddit do I want to use, like all these kind of different things. I made some choices here. You are welcome to diverge, you're just kind of on your own at that point, right?

[00:00:28]
So, we're going to be using NeonAuth, which I just happen to like work specifically on myself, but other good choices here would be like WorkOS or Clerk or DScope, or Stitch. There's like so many good options here, like we're kind of spoiled for choice. Like I remember, like, I don't know, seven, eight years ago, it was like Auth0, right? Like that was it. That was like the only good choice in the market for like, that was not a huge pain to work with, otherwise you were stuck with something like Active Directory or something like that or just rolling yourself, right, rolling out a Passport or something like that.

[00:01:07]
Yeah, now is as good a time as any is like, I work at Neon, so like I will, I just wanted like, disclose the, I guess, conflict of interest there. So it's no wonder that I chose NeonAuth, so that's just be aware of the bias that's coming from that, from me. But the nice thing is that we're going to be using NeonAuth and then we're also going to be using Neon and the two pieces kind of fit together, so that's why we're going to be doing those things.

[00:01:37]
Okay, so, let's go ahead and go to neon.com and we're going to say, you're probably going to say sign up, unless you already have an account. For me, it's going to drop me in here. I'm a paid user, obviously, because, you're probably going to end up on the free tier, but everything here should be no problem for you. You can see Wiki Masters here, that's the one I was working on. You're going to come up here and click new project.

[00:02:12]
And we'll call this a FEM Wiki Masters. Uh, 17 is probably good, you could be on 18. I can't see any reason why 18 would be bad for this. But I'm going to stay on 17. Azure, AWS makes probably zero difference which one you choose there, so feel free to whatever you want to do. We're going to be doing most of this on Vercel today, and Vercel is on AWS, so it would make sense that you'd want to put those things so they're closer in the network to each other.

[00:02:44]
I think I put mine on US West too. If anything this like past two weeks have taught us, being on US East One can be a bit of a, bit of a minefield. So, uh, feel free to choose whichever one you want here. I'm going to choose US West 2. Though I guess here it might make sense for us to be in Ohio. Okay, let's do a US East 2. You can enable NeonAuth here or not, either works. Uh, why not? And I'm going to say create.

[00:03:23]
Okay, this is going to immediately drop us in the Auth panel. And you are just going to enable NeonAuth. And that's it. We are ready to go. Okay, so NeonAuth, if just to disclose here, it's actually StackAuth underneath the hood. Which is this company, it's a little YC company. Everything that you're about to see in this course, like you could just sign up for StackAuth and just do it directly to StackAuth because we're going to be using their SDKs directly.

[00:03:59]
So, that's totally fine too. The nice thing about doing it through Neon is you get like the syncing engine in the backend, but, uh, both would work just fine. So you're also welcome to sign up on StackAuth and then connect it to Neon, that also works as well. Okay, you're going to go to this configuration panel right here. And we. I'm going to go to these environment variables right here and you're just going to say copy snippet.

[00:04:33]
Okay. For Next.js obviously. And we're going to come back over here to our page, and we're going to create a new file here in the root called .env. And I'm going to paste this. So this is all of my secrets, so someone probably before the end of the class is going to go steal all my credentials. That's fine, whatever. It's really easy to roll the credentials, so I'm not super worried. So, we're just going to paste that in there, that's for NeonAuth, that's for the database, so that the nice thing is that we got both actually just looking back at it.

[00:05:09]
You get both the database, you also, we don't have to go find that as well. This is your Postgres connection string. This is your Stack secret server key, the publisher key, the Stack project. You actually don't really need to care about any of these things because the SDKs will just take care of all these things for you. They just have to be present in your projects. Uh, cool. So, come back to, uh, your CLI, we'll stop this for just a second, and we're going to say npm install.

[00:05:49]
Actually, no, we're going to do this npx @stackframe. Which is the parent company of StackAuth. And it stack@latest. And no browser, because we don't need that right now. Okay, it's going to say I need to do this. You say yes. This is really slick. This is the part that like really sold me on StackAuth is the ASCII art. No, I'm just kidding. It's uh how easy it is to get started with this. Okay, so, for the rest of this course, they haven't updated their loose React in a long time.

[00:06:30]
So it's going to give you these npm warnings every single time that you're on npm install. It's expected. So don't worry about it. I wish I could fix it for you, but I can't. But it's saying it expects React 18 and we're on 19.2, so. I can't fix that for you. I can only bug them to please go fix that because it drives me crazy. So, yeah, let's look in here of what they've done here. They, um, they ran, uh, they installed the SDK for us.

[00:07:10]
Looks like they put the MCP server in there. That's pretty cool. They put Cursor rules in there for you, and then they put in this, uh, Stack directory. Which is here, and it has a client and a service. Again, you don't really need to know too much about this, but I like that they just like, they put the code in there for you. So if you need to go modify like how you interact with Stack, you can, right?

[00:07:32]
You're not actually stuck with like whatever their library prefers. And then in your app directory, they put this handler, uh, directory, and this actually is what handles all of your login and logout and your, uh, user pages as well. And sign up page. And it's all done through this like StackServerApp and stackHandler. So let me show you what I'm talking about. Yeah, first of all, we got to go update the links that to point to that, that uh, these correct routes.

[00:08:36]
So at, uh, let's go to NavBar. Uh, come on. NavBar. Okay, at the top, we're going to import UserButton from @stack. Like that. And then we're going to import StackServerApp from @stack/server like that. Okay, inside the function here, we're going to to say const user equals await StackServerApp.getUser. This is great, like I love this like kind of like hook. Because it allows us to like, oh, and I think I need to make this async as well, async function.

[00:09:13]
And you can make this async because everything in Next.js as we've talked about in previous courses is by default the React server component, so this all just kind of works out of the box. And so now we have this user, and this is going to come directly from StackAuth. You don't really have to do anything much more than like, you don't have to like make an API call or anything like that. They kind of just absorb all this complexity for you.

[00:09:38]
Alright, so inside the menu list here, we have to sign in and sign up button, but we only want to show this to people that are not signed in, right? So, what you're going to do. Is we're going to wrap all of this, uh, menu item, or this is the menu, yeah, menu. Menu item. So we're going to wrap all of this in a ternary, because everyone loves ternaries, right? Want to say if there's a user. Output, uh, navigation menu item, navigation menu item.

[00:11:01]
With a user button. Else. And then, nope, I messed this up. This is not supposed to be. Yeah, this is supposed to be inside the menu list. Yep. Otherwise, I'll. Put. This and you have to wrap this in a, um, one of these empty tags here. Because it's two items next to each other. All right, let me recap what I did here, because that was like some tactical surgery there. We wrapped everything inside of this menu, uh, list in the, uh, essentially a ternary here.

[00:11:33]
A ternary is just an if statement, right? Uh, but written as an expression rather than a statement. So we say, if a user exists, because this user item will be null if no one's logged in, if someone is logged in, then we want to just show them like their user button up there. If they are logged out, so if this is falsy, which like null is falsy, then show them the sign in and sign up buttons. That makes sense?

[00:12:02]
Again, I remember like doing horrific ritual incantations to like get this kind of data out of like Auth0 or Active Directory or something like that much earlier in my career. So like this new wave of like Clerk and StackAuth and some of these companies that make this really easy, it's just, it's wild that this doesn't consume my whole day to do something like this anymore, right? Okay, so, now. In theory, we should be able to go look at our app.

[00:12:39]
Oh, I think we need, yeah, we, the other thing that we need to do is we need to update these hrefs as well for these links. Which is just going to be /handler and /handler. Because that's what StackAuth does by default, so it's kind of like out of the common path here. Again, this is coming to, so it's app handler, stack, right? Uh, this is all going to be handled by StackAuth for us. Okay, now, if we open our browser, and we look at our site, uh, which I don't think I have running at the moment.

[00:13:23]
Npm run dev. Now I think if we click sign in. We have like a really nice, and I like look because everything is shadcn, it all looks like it all was made together, right? Which is great. Now you might be thinking like, well, like, maybe I don't want to have my site look like shadcn. You can totally rebuild these forms yourselves. It's actually not hard. You can theme them a little bit, but they give you all like the buttons and all that kind of stuff and all of like the components you can build these things yourself.

[00:13:55]
For our case, like because we are using shadcn, we're just going to like use it as it is. But this is sign in. This is sign up, and it all just kind of works. I've already signed up for my own app here. So this should just work for me. Oh no, I'm going to have to authorize again. Oh, hey, they fixed it. This used to just say the name of the developer that worked there, so it felt a little sketch. But now it says StackAuth, which is a good job team at StackAuth.

[00:14:24]
You can change this later, so you can actually make your own GitHub app so that says, you know, by Wiki Masters as opposed to saying by StackAuth, but for now we're just going to say authorized StackAuth. Okay. And now, this is just pulling it from GitHub, right? So I have like a little image there. I have a little drop-down menu. I even have an account settings page. This is probably like blew me away of like this, again, this is very cool.

[00:14:52]
We didn't write any of this, right? This is all coming directly from StackAuth. It tells you like, what my, you know, what I'm logged in with, multi-factor auth, all the notifications, you can turn, like, you can turn on and off marketing things, you can like log out sessions, so I could come in here and say revoke this, you can't revoke your current session, but if I have multiple devices in here.

[00:15:18]
I, again, I, and you can add things to this as well, right? You can add like, hey, I track their home address or something like that in here as well. Pretty cool, right? Pretty cool what you get for free out of the box here. Now, if I come back to Neon console and I look at my users here, I can see the user that I have here. I can view the details, I can see everything that they have, they don't have a password, they'd only log in through GitHub, you can see their profile image, they have things like passkey supported, all sorts of really cool stuff.

[00:15:54]
The part that I find that I love the most here, if we come into the tables and I switched from the public schema to the NeonAuth schema. I have now a table in my database that is synced to my users. And like, again, if you might be looking at it like, yeah, I guess that makes sense, right? But this was so hard to do before. I just want to like emphasize like, this used to be really difficult to get like a copy of your user's table in your database.

[00:16:21]
You had to like set up webhooks or something like that, or you had to run, you had to own the auth service yourself. That's why something like this is super helpful is that it allows you to like have a third party managing all of your concerns, but then you can do like joins and foreign keys in your database based on your user's table, which is really cool. At this point, is the frontend connecting to Neon through the authentication provider or is it going directly to Neon?

[00:16:58]
When all that authentication we just did on ours went directly to the StackAuth servers first, uh, the source of truth lies on the StackAuth servers and then that is synced back to Neon via webhooks in the backend. Generally you shouldn't have to care, but there is some latency, right? So if you do like sign up user and then immediately try to query the database like immediately after, there is a chance that it could not be there yet.

[00:17:26]
But the syncing is subsecond. I get obviously I get excited about this feature because I helped build it, but like it works really well, so I'm very happy with it. Yes, you can come in here as well. You can say, let's going back to NeonAuth here, you can add, you can create users directly from here. Yeah, all sorts of really nice things to do. And then at some point if you're like, I'm unhappy with NeonAuth, but I still like StackAuth, you can always come in here to configuration and you can click claim project and you can transfer the project over to StackAuth and you can claim it there.

[00:18:03]
So if you wanted to do something like they have more features on StackAuth than we expose on NeonAuth. Like if you wanted to add like Discord, like login, I don't think we support that, but they do. You just go in here and say claim project, it pops up like a really nice UI and you just transfer it from Neon into StackAuth. Yeah, this, these are the shared keys from like GitHub. This, that's why I said like by StackAuth, you can change this, you can say.

[00:00:00]
Configure, you can change from the shared key to being your own client ID and your own client secret, and then it'll say like, log on to this by Wikimasters, that this is how you would do that here. Same thing with Google, and I think we, yeah, we support Microsoft, we just don't expose that at first, but they have even more over on StackAuth if you want. Uh, something like that. We will mess with this later because, uh, we'll have to for Vercel.