How to Add User Auth with Claude Code (Step-by-Step)
How to Build Full-Stack AI SaaS with Claude Code (Tutorial)Fresh📅 2025-11-13
Integration Flow
┌─────────────────────────────────────────────────────────────────────┐
│ INTEGRATION ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ USER REQUEST │
│ │ │
│ ▼ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ │ ────► │ │ ────► │ │ │
│ │ Google │ │ Database │ │ Output │ │
│ │ │ ◄──── │ │ ◄──── │ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │ │ │
│ │ │ │ │
│ └────────────────────────┴───────────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────┐ │
│ │ RESULT │ │
│ └───────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Integration Points
- Core concepts explained
- Step-by-step implementation
- Practical examples
Transcript
[00:00] In this video, I'll show you how to add user authentication to your Claude Code apps. In this tutorial series, we're working on a real-world SaaS application that includes user authentication and payment processing. At this stage, we've set up our basic project, and we use Claude Code to build out the UI of this app. And we've got all of these other pages, like our dashboard, a page to generate these images, a gallery, pricing, complete documentation on using our app. And in the top right,
[00:30] we've got this user button where we can see the user's name and their email address. And of course, they can click on this profile page, again, where they can see their account information. Now, these are just the front-end elements. At this stage, we haven't implemented the actual authentication system yet, and all of this is simply using dummy data. So in this video, we'll focus on user authentication. Now, if you've been following along with this series, then you already have authentication set up in this application, but we never really went into detail on
[01:02] what library we're using and why. So when building user auth for your applications, you basically have three different options. The first option is to try and build the auth system yourself. Or of course, you can ask Claude Code or some other coding agent to build it for you. But for something as important as user auth, I would rather hand that responsibility over to the experts. And there are free and paid options that we can go with. Now, in this series, we will be using a free and open source library to deal with our user auth. I've tried pretty much every auth library
[01:34] out there. I must admit, I really like better auth. It's really easy to integrate into an Xjs applications, which is what we're using. And if we have a look at the website and we go to integrations, we can see that this also works with Astro and Remix, Next, Nuxt, Swellkit, and Tanstack Start. All very popular frameworks. And if we're building mobile apps, it also works with Expo. And better auth also supports a ton of different providers. So if we go to
[02:05] authentication, we of course have the standard email and password option. But we also have all of these providers like Apple, Facebook, GitHub, Google, etc. Of course, we've already set up Google auth in our application. But if you wanted to add support for other providers, then you can simply click on the provider, simply copy this documentation, and ask Cloud Code to implement this integration and to walk you through any manual steps. Now let's go to plugins. Here you can see
[02:37] support for some really cool features. And look at this, it actually supports MCP authentication as well. So if you are building an MCP server, you can also use better auth to protect your MCP tools. So this is where users first need to authenticate their accounts on your MCP server before the agent will be able to use the tools. So you could track something like usage, etc. It also supports organizations and teams. So let's say in your app, you want people to be able to create different teams and belong to
[03:08] different organizations, you can do that as well. And in each user within the org, could have different roles and permissions. Now scrolling down, we also have integration with payment processors like Stripe and Polar. So this makes the payment integration extremely easy. If you've ever tried to implement something like Stripe in your application, you know what a payment can be. You basically have to maintain a user record in your database with a link to the user record in Stripe. And then you have to keep
[03:39] those things in sync. But what better auth will do is manage the user record in both our system and in the payment system. We'll go into detail on this in the payments video. Now again, better auth is open source and it's totally free to use. But if you wanted to go with a paid service, a really popular service is Clerk. I'm not sponsored by any of these platforms, by the way. I've actually used Clerk on another project. And it's really easy to implement. The only thing you have to consider is that Clerk is a paid
[04:11] service. They do have a very generous free plan. But if you wanted to use advanced functionality like organizations and teams, then unfortunately, you'll have to subscribe to the pro plan. Then finally, there's another thing to consider. If we use frameworks like better auth, then all the user data will be stored in our very own database, which means we own the data and the responsibility. If we use services like Clerk, then the user data will actually be stored in their database, which we won't have access to.
[04:42] It's very unlikely, but if Clerk had to close their doors and shut down overnight, you will basically lose your user data. So you'll probably need to keep a record of the users in our own database either way. So we'll just go with better auth. Right, so let's jump back into our app. So again, we've already set up better auth in our system. So if you missed the setup video, then I'll link to it in the description of this video. And I'll show the card on the screen right now. The first thing I want to change is at the moment, we're simulating a scenario where the user
[05:13] is signed in. So we show their name and email address, and nothing happens when we click on sign out. So let's actually implement the actual user button. Alright, so let's go to Claude code. Alright, so the first thing I'm going to do is ask Claude code to verify that we have better auth setup correctly in our application. Now instead of simply trusting Claude to implement better auth based on its training data, I want to give it up to date documentation on using better auth. We could assign an MCP server like
[05:43] context seven, which will give Claude code tools to retrieve the documentation itself. Alternatively, we can create a folder in our project like docs, and maybe a subfolder called technical. And in there, we can create a better or folder. Then what we can do is go to the documentation. And then we can go to integrations and next.js. So this gives us everything we need to include better auth in next.js applications. So what I like to do is to grab this markdown, then
[06:17] let's create a new file and we'll call it next.js integration dot MD. And let's paste in all that documentation. This is also saying that we should check out the installation page. So again, this just shows us what dependencies to install and what environment variables to set. So let's copy this markdown. And again, let's add it to this folder. And let's call this one installation dot MD. And let's paste in those docs. So then if we ever wanted to do anything better auth related, we can simply grab this folder or a specific file
[06:49] and add it to our conversation. And we'll actually use this in the payments video to ask our agent to integrate polar into better auth simply by dragging this file into the chat. Now the alternative is to install contact seven or an MCP server that will give the agent access to up to date documentation. The only limitation I found is if you're using cloud code web as an example, and if you haven't done so already, I highly recommend giving cloud code web a try. You simply select your GitHub repository, and then
[07:21] you can chat to the agent the same way you would in your code editor, and it will create a different branch, make the changes and deploy those changes to GitHub. Now the limitation of this is that this agent won't be able to call certain MCP servers in this web instance. So if we have the documentation living within the project folder, the agent will have access to that documentation. And another reason I like to reference the documentation is because I like to know what's going on in my application.
[07:51] Unless you're simply vibe coding, you really should understand what you're implementing and why. So by going through the documentation, you're also familiarizing yourself with the solution. So with all that said, I will be adding to the documentation. But in certain instances, we might just ask the agent to go to contact seven to retrieve the documentation itself. So let's also set up contact seven, go to contact seven.com, then go to install. Let's go down to installation. Let's go to cloud code. And
[08:23] let's copy this first command, then let's open up a new terminal, it's based in that command. All right, then what we have to do is provide this API key. So let's go back to contact seven. Let's sign into our account. Let's create a new API key, we can give it a name like YouTube, let's copy the key and add it to this string. Then what I also recommend is installing this at user level so that your connection lives outside of your project.
[08:54] So what we can do is after the name contact seven at dash is followed by user, and you can then press enter. Then if we exit out of cloud code, and go back in, we can enter front slash mcp. And now we're connected to contact seven. And we can see the configuration was indeed added to our user profile. Now the reason I prefer to add it to the user profile is that if we added it to this dot mcp dot JSON file, so this
[09:25] one over here, all of this will be deployed to our GitHub repository as well. And that includes that environment variable. So if a repo was public, anyone who's got access to your repository will be able to see your API key. All right, so now we've got documentation living locally. And of course, we've got contact seven as a fallback. And as a little bonus, if we go to the cloud folder and agents, I've created this better auth expert for you. And this sub agent already contains instructions to use contact seven and
[09:57] docs folder to review or implement better auth solutions. So with all that said, we really have a lot of different ways now to get the best out of this auth system. All right, so the first thing I'm going to do is go into planning mode, then let's say let's create an implementation plan for the following. At the moment, our application is using dummy user data. Now we already have better auth setup in this application. So let's replace all this stubbed data with the actual user data from the database
[10:29] and from better auth. This includes things like the user button and the sign in button in the top navigation, and the user's profile page. Please reference the better auth documentation in the docs folder, or use tools like contact seven to retrieve up to date documentation on setting up and using better auth. Now this is optional, you don't have to add this to the prompt. But because we already have this better auth expert sub agent, I'm going to add that to the
[10:59] conversation as well. So let's say, please use the better auth expert agent to assist you with the solution and to review the proposed solution. Right, that's good. So let's send this. All right, so we can see Claude code actually went through all the documentation, and now it's consulting with our better or sub agent as well. Okay, cool. So we've got our plan. Let's have a look at it. All right, so we'll replace the mock data, replace all mock data throughout the application. Claude wants to add the credits field to
[11:30] the user table. And I guess that's perfectly fine. I was planning to do the credit stuff in the payments video. But since we're changing the user table, we can just do it at this stage, right, then it's going to create the sign in button, sign up buttons, and everything else looks correct to me. Alright, so instead of making the changes at this stage, now this stage, I do want to clear the conversation to free up context. But of course, if we run clear at this stage, we're going to lose our implementation plan. So we learned in the previous video that we can actually store this implementation plan
[12:01] within the specs folder, and a sub folder specific to this feature. So I've already created a reusable command for us. So all we have to do is run create feature. So Claude will now have a look at our conversation and the implementation plan, and then create a new sub folder for this feature, along with a requirements document and a detailed implementation plan. And of course, in order to create these files, I'll simply approve these changes. Alright, so within the
[12:31] specs folder, we now get this new sub folder called better auth integration, along with our implementation plan and the requirements doc. So let's have a look at this requirements document. This contains our original requirement, along with a lot of other valuable information, like the technical requirements, the success criteria, etc. And then we also have our implementation plan, which is broken up into phases, along with a list of actionable tasks per phase. So now we can clear the conversation. So all we have to do now is
[13:03] simply grab our spec folder. So this includes both the implementation plan and the requirements document. And either you can ask Claude co to try and implement all the phases in one go. But again, what I like to do is to implement everything one phase at a time. So implement phase one and clear the conversation to free up context, then I'll implement phase two and clear the context. And this is such a critical step that people seem to miss smaller and more focused context windows definitely provide
[13:35] better results. Please go ahead and implement phase one of the implementation plan. Afterwards, mark all the tasks as complete once you're done. And let's send this. And another reason why I'm making these changes one phase at a time is it actually gives me an opportunity to review the code myself. So I can go to source control. And from here, I can view any files that were changed or created. So this gives me an opportunity to actually review this code. If I implement everything in one go, it can feel
[14:05] overwhelming to go and try and review all of these files. All right, so Claude says it's done, it's actually run a few database migrations as well. So let's say when we refresh our database, we can go to the user table and we should now see that credits column. I also noticed that we have this generations table, which is something I didn't ask for. And to be fair, this was mentioned in the implementation plan. So I just didn't notice it. And that's why it's so important to go through the implementation plan to make sure that
[14:36] everything is correct. So ideally, we should have asked Claude code to exclude any other tables not related to authentication. In fact, I'm going to do that. So let's say, so I noticed you created a generations table. At this stage, we're only interested in implementing authentication, we will implement these other tables at a later stage. So for now, you can mock the generations. So please remove the new generations table that you created, and also update our requirements file
[15:07] and implementation plan to exclude anything that's not related to authentication. I'm okay with us keeping the created field on the user table that can stay. Oh, great, I can see the generations table was removed from the implementation plan. And if I refresh the database, the generations table was removed. And cool, we can actually see Claude code marking the stocks as complete. So there we go. And 1.5 should be checked any second now. Cool. And done. All right,
[15:38] let's actually do a context check. So I'll run the command context. And let's have a look. Alright, so we're sitting at 53%. That's really not bad. But just to be safe, I'm going to clear the conversation. So now we've freed up a lot of context. Now I can simply grab this specs folder and say, hey, please go ahead and implement phase two, please mark the tasks as complete once you're done. Right, so Claude code just finished implementing all of these phases. So there's one last
[16:08] thing I like to do before I assume that all of this is correct. Again, I'm going to clear the conversation and say, all right, so we've implemented all of these phases, please use the better auth expert sub agent to review the solution and then address any concerns it might have. Right, let's send this. Right, so our agent is not calling the better auth sub agent. And the sub agent has very specific instructions to review our solution to check for any possible gaps or security
[16:38] concerns. All right, well, let's go ahead and test our application. So let's click on sign in. That's cool. Let's select our Google account. And indeed, we are signed in, I can see my profile picture. And now instead of getting that dummy data, I'm getting my actual name and email address. Let's go to profile. And that's awesome. Under account information, we see my avatar, my name and email, and our account ID. If we go to our database table and refresh this user's table, we can see our
[17:10] user record. So this ID will correspond with the ID on this page. That is really cool. So let's also sign out. And let's go to dashboard. And yes, we can see that the dashboard is indeed a protected page. So we have to be signed in to access this page. It's also going to generate, which gives us the same thing. It's going to gallery, same thing. Of course, we can still guide the pricing and docs. But what I want to do is if a user is not signed in, they should not
[17:40] see the dashboard, generate and gallery links. Our better auth sub agent is still reviewing the solution. So I'll just create a new terminal session. And let's say when a user is not currently signed in, they should not see the dashboard, gallery and generate links in the top nav. Okay, let's see this. And perfect those links are now gone. So let's sign in again. And now we see our dashboard, generate and gallery links.
[18:10] Now we're nearly done with adding authentication to our app. I actually want to add a special admin section to this application that any platform admins can access. Now these platform pages will allow the owners of the app, so ourselves, to manage certain aspects of our application. So maybe we can have a view of all the users in our app. And we can also have a page where we update the pricing of our application, or just a dashboard with all of our apps analytics. Now I'm not going to create a separate implementation plan for this, as this is
[18:42] actually really straightforward. All right, let's add a special admin route to this application. Only platform admins should be able to access this route. This means we have to add a new special column on the user table called platform role. If the platform role is equal to admin, then the user should have access to this admin page. For any other types of users, they should be navigated to the dashboard page. I want you to carefully
[19:14] think about what the proper way is to add these additional fields using better auth, and also protecting this admin route using the platform role field. For now, you can just create a very simple dummy admin page we will populate it in a future video. For now, we just want a placeholder page which is protected. So what I'm expecting the agent to do is to add this platform role field to the user table in our database schema.
[19:46] So if I have a look at the schema page, we can see that the users table now also contains this platform role with the default value of user. Let's refresh our database table. And yes, I can now see this platform role column. I'm going to change my user to admin. Let's save this change. Then let's go to this admin route. And this is perfect. We now have this admin page, which we can extend with any admin related features that we need. So let's also sign out. And when I tried to access
[20:16] the admin route, it redirected me to this page. We also seem to get this error. So I'm just going to copy and pass it to Claude. Now I'm actually going to change this to user. And when I tried to go to admin, I was instantly redirected to dashboard. And this is awesome. We just implemented authentication in our app. So now the logical thing to do is to create a checkpoint. So I'll just run the checkpoint command. And this command is going to add all of these untracked files into a commit. And it will write a
[20:48] detailed comment for this commit. And now that we have our commit, we can go ahead and send this to production. I hope you enjoyed this video. If you did hit the like button and subscribe to my channel to receive notifications as soon as I publish a new Claude code video. I'll see you in the next one. Bye bye.