Adding user authentication to your bolt.new app

whenever I'm building an app I usually start with the most distinct feature first like creating a note in a Notes app or displaying a chart in a data analysis tool but as soon as this works it's time to take care of the fundamental part of every application and that's handling users also called authentication and authorization so let me show you how to add the ability to create user accounts in your bolt app and ensure that each user has access only to their own data using a service called Firebase if you don't know what Firebase is

I've covered it in the previous tutorial where we've added a database to a habit tracking app while not required I highly recommend you to watch it at some point we'll continue using this app as an example but this process will be the same for any other project assuming you have already configured it to use Firebase let's go to the Firebase dashboard and click authentication after your first visit it will also be available in the project shortcut menu in the sidebar right now we have a clean slate so let's set up a signing method in your

app you might want to have several ways of authenticating users so here fbas list a dozen of different signing providers but let's take the most universal email password method and let's click enable and save now if we go to the users tab we can manually register user which might be useful if you're making an app only for yourself and don't need a signup functionality but we'll have a proper registration form instead before we switch to bolt uh we'll clear the current database content it's not absolutely necessary but adding users into a app will change the

data structure after all each habit will be tracked for a specific user so it's easier to populate the values from scratch than to manually fix the missing user data later we need to manually type h collection name to delete it and let's go back to bolt so what we want is to be able to sign up with email and password and log in I also want users to have a name they can Define for thems so we can display that somewhere in the UI instead of an email bolt updates the app now the off controller

provides the user information to the UI then we get the authentication related components and finally an update to The Habit storing logic to include which user a given habit belongs to and it looks like now we can log in of course we don't have an account yet so let's register first and we have no habits because we've cleared the database earlier but we can already find our newly registered user in the Firebase dashboard under authentication let's go back and add a habit again mark it as complete and see how it looks in the database as

you can see there's now a user ID in the habit progress and for the Habit this is crucial for the database to return only the data for a given user let's make sure the app actually requests only that piece of data for that I'll quickly register another user and yes Tomic one doesn't see tomic's data but if I log in back as just Tomic my workout habit is still there I want to add two more user related features to the app and then there's one super important security issue that we have to take care of

so first now that we have the concept of user profiles we'll want to give our users a way to personalize them let's add a profile page linked from the username in the header to change the name and password and bolt creates the component with the form that has this common pattern of provide the old password and the new password twice speaking of typical practices usually when you create an account you receive a welcome message in your email and most often you need to actually confirm that email address right now when I check the email I

registered with no such thing has happened so let's add email verification we get a new component probably with the verification text being displayed in the app and our previous components get a small update as well nice it shows up in the app because we've just implemented this feature I already know no email was sent yet resend it let's check our inbox and look at that we have a pretty decent looking verification email here it's even personalized this email is actually being sent by Firebase and if you want to change the content of the message you

can do it in your dashboard let's visit authentication again and go to templates here we have several predefined transactional emails and you can see the source of what just landed in my inbox okay time to verify the email and when I go back to the app my user is verified now if you remember before I said there's one super important security issue that we have to take care of what is doing right now is asking the database for certain pieces of data that happen to belong to a currently logged in user but there is no

mechanism that would prevent someone from asking for say all the data in the database or even from modifying or deleting it this is where security rules come in they're defined on the Firebase side and specify which user can create read update or delete which resource when we initially connected this app to the database in the last tutorial we've allowed full access because we didn't have users yet we need to change that so now that we have the authentication how should we update the fire store access rules to make the app secure bolt has created a

file for us and explained what steps we should take in the dashboard let's copy the rules go to Firebase firar database and rules remove the previous rules and replace them with the ones we've just copied you can of course check the logic of what's changed for instance a habit can't be read or modified if the user hasn't verified their email or if they're not the habits owner just in case let's check if we haven't logged our user out from the data which we haven't all right now we have an app with a database and a

proper handling of user accounts I hope this was useful and you've learned some new things don't forget to let me know in the comments what other topics you'd like me to cover next I'm already working on the super base videos and plan to do one on stripe payments as well so see you next time