Introduction
What's up? I'm your Elixir Mentor, Jacob Blitzo. In today's video, we're setting up our application with Phoenix framework 1.7. Then we jump straight into user authentication, which is a pivotal security feature. The best part, Phoenix automatically generates this for us. We'll walk through the schema, explore the generated files, and finally fire up our Localhost server to see our live views in action. Ready to get a hands-on understanding of Phoenix's powerful features? Let's just dive right in then.
Phoenix Framework & Prerequisites
So today we're using Phoenix to create a new live view project. What is Phoenix? Phoenix is a web development framework written in Elixir, which implements server-side model view controller pattern, AKA MVC. Phoenix provides the best of both worlds: high developer productivity and high application performance. It also has some interesting new twists like channels for implementing real-time features and pre-compiled templates for blazing speed.
Let's open up our terminal with command spacebar terminal and let's get Phoenix installed. We need to have Erlang VM and Elixir installed first. You'll want to make sure you have Elixir 1.15 or later and Erlang 26 or later, and we can check that with Elixir -v. And you can see I have 1.15.4 and Erlang 26. If you don't have Elixir 1.15 or Erlang 26, follow video 1 in the Elixir Basics playlist to install them using ASDF, a package manager. I'll put the link in the description of this video and I'll put it somewhere to click right now as well.
You'll also need to make sure you have a database installed, which we got a Docker container with Postgres running in the first video of the Real Deal API playlist. I'll add a link to that one too. That'll be in the description and somewhere on the screen. So let's open up our Docker dashboard and make sure our Postgres container is running. Mine is running. If yours isn't, press play. And if you don't have this, if you don't see this setup, you'll have to follow along in the first video of Real Deal API playlist, and that'll get everything set up for you.
Installing Phoenix & Project Generators
We are going to want to make sure we have Hex installed, and by doing that we just need to do mix local.hex. And if you're, if you already have this installed, it won't matter, it will just install the latest version. So you can go ahead and run this. And then we also need to have Phoenix installed, and you'll do that with mix archive.install hex phx_new. And this will install Phoenix for you.
And to check your Phoenix version, if you already have it installed, you can do mix phx.new --version. And you will see that I am running Phoenix 1.7.7. Alright, so if you don't have that, run through those steps we just went through and you'll be ready to go.
Creating the New Phoenix Project
Now we can use Phoenix to create our new live view project. I'm going to go ahead and CD into documents, my developer, and then Elixir Mentor, and you can create this in any directory you want. This is where I make mine. And we are going to now say to create a new project, we need to run the command mix phx.new and then the name of our project. I'm going to call mine elixir_gist.
And then I'm going to use a couple options here when as we create this project. And the first one is going to be --no-install, and this just means we're not going to automatically install our dependencies on the creation of this. We're going to do that later once we know that our database is set up correctly in our config file and a couple other things. Alright, and then we're also going to run --binary-id, and this uses UUIDs instead of integers. And you don't have to necessarily do this. This is a personal preference of mine. There are lots of articles arguing which is better and feel free to dive in and, uh, you make your own assumptions on that one. But I prefer using UUIDs, and so running the option binary ID sets up our project to do that.
And now we can hit enter, and it creates our project for us. And now we can CD from this directory into our Elixir Gist directory. Let's open up our project.
Project Structure and Database Configuration
And you can see that we have a few things here that are automatically generated. And some of this stuff you'll recognize from our API project. So we have some tests that were generated, and then you'll recognize that we have a web and then our project directory. Our project directory is what holds like our context and schema directories, and we're going to generate one for accounts shortly. And then you'll see components and controllers, and we'll go through all this as we go through things.
But when we first run our project, you'll see our home.html.heex um, hex folder, or file I should say, and that will be our homepage. And then if you go through this, you'll see we have a root.heex file and an app.heex file. And we're going to be diving into all this in the next couple videos as we set up our own project. We're going to be getting rid of everything in the app.html.heex directory or file, I should say, to create our navigation bar, our footer, and the stuff that is going to be raised on every page. And then we're going to redirect to our own homepage, which will be our create Gist page. So you can see a lot of cool stuff here.
And then we have our Dev config file, and we're going to have to set this up to connect to our database. And from the video in Real Deal API playlist, we set this up for a username to be backend_stuff and our password is block_erlang. And then we can save that. And obviously your username and password could be different depending on how you set up your Docker container for Postgres.
And once that is done, I should actually go through one quick thing. If you don't know your password for the Docker container that you have set up, like let's say you have Postgres running, let's do, we can do a docker ps in our terminal, and we can see our Postgres container here. And the name of our Postgres container is bs_db_local. And if we do a docker inspect bs_db_local, we can get all the information. We can see the IP address, but if we scroll up, we can find the environment variables. Postgres user, and that's backend underscore stuff, so that's our username. And then right underneath it is Postgres underscore password and you see that that's block underscore erlang. So if you're not sure what you set it up, that's how you can find it. No reason to recreate anything.
Generating the Authentication System
All right, so now let's create our authentication system. And instead of manually creating it like we did in the Real Deal API project, we are going to use Phoenix, which makes it really easy. So we're going to do mix phx.gen.auth. And then we are going to name the context file, which is going to be accounts. And then we're going to name the schema name, and we're going to use User, we're just following what the documentation uses, and then we're going to use user and then _users is the plural, so the table name that is going to be created for this. And then all we have to do is hit enter now.
Oh, we have to install our dependencies. See, I manually did it and then forgot to do it. So, mix deps.get. There we go. And now let's go ahead and run our generate again. So, mix phx.gen.auth, and then accounts, User, and then lowercase users, and hit enter.
And now it's going to generate the live views, the schemas, the context, and the controller for our authentication. Now it's asking us if we want to create live view based authentication system. We want to, so you can hit enter or Y, enter. And this is creating live views. And what's nice with this is all we're going to have to do is adjust some CSS to match our Elixir Gist theme, but we can use all most, most of the created live views that Phoenix gives us. So now, that's it.
Exploring Generated Authentication Files
It's already set up and we can go through and look at some stuff that it created for us. So now in the lib directory, Elixir Gist, you'll see that we have an accounts directory, and this has three different schema files. We have our user, which is email, password, hashed password, and then a naive date time for when the account was confirmed, which is really cool. And if you notice, the password is virtual only, so it actually does not get saved to our database, which is good. And then we have a couple other things here. We have user token, so we have a whole separate table for tracking our token and whether our user is authenticated or not. And as we get into more of this, we can, we'll dive into more of how this works as we start building this project out.
And then we have user authentication which is just email templates for sending emails. And what's really nice is if you don't have an email set up when you're in Dev mode, Phoenix has a built-in inbox that you can use in Dev mode. So you don't even have to set up your email to send emails if you're just running localhost, which is really cool. And I'll show you that in a second as well.
And then one thing I want to point out is if we go to the user schema, you can see that we have binary ID added here and that it auto generates, and this primary key wouldn't be here if we were using integers. And then if we come down to the priv directory, private, and go to repo, migrations, you'll see that we have a migration here that creates our users table and our users token table. And then you can see that we have index for user tokens based off of user ID. And you can also see we have unique, a unique index created for our user email. And we don't have to touch anything in this.
Setting Up the Database
But we are going to want to run, we want to install dependencies that were added, and then we're going to want to do ecto.create and migrate to run these migrations so they exist in our database. So let's go ahead and do a mix deps.get again. I'm having internet problems, that's why you see the red, so hopefully I can still run this project because it's not actually, um, it might not be installing things.
So if we do, so we want to now run our, we want to create our database for this project since we haven't done it yet, and you do that with mix ecto.create. And then we want to migrate, which runs our migration files for our database, so it creates the tables that haven't been created yet, which in our case is the accounts or the users tables. And you can run both of these commands with one command. So we can just do mix ecto.setup, and that takes care of both things for us. And there you go, you see that it created our users table, and then you can see the indexes it created and then users token and all that good stuff. So now we should be good and ready to go and we should be able to just do a mix phx.server and we should be up and running on localhost.
Okay, and we're getting errors because I actually don't have dependencies installed, which is a bummer. I'm going to pause this video and wait for this storm to pass and then we'll be back.
Launching the Server & Registering a User
Okay, I am back. Sorry about that. Um, where I am, we're on Starlink, and sometimes when thunderstorms roll through, you'll lose your internet. So back to our terminal, let's go ahead. I need to run mix deps.get again, and this will install all of our dependencies. There we go. And now we should be able to run our localhost server. So mix phx.server. And there we go, we are running on localhost Port 4000. Let's go ahead and pull that up.
All right, so out of the box, this is what you get with a Phoenix LiveView project. And since we have authentication already added, you'll see that we have register and login up in the nav bar. So let's go ahead and register an account, and I'm going to just do [email protected]. And what's awesome is all these views are already here, so we're going to just slightly modify them with our CSS in the next couple videos, and then we're going to have an awesome login system that we didn't have to do much to do. And then I'm just going to do Elixir Mentor as my password, and now we can create an account, and we get a nice little modal notification. And now when I'm logged in, we have logout, we have current user, and then we have settings. And settings, we can just change our email for this account and change our password. And these are the same settings we're going to use in our Gist clones, so we're really just reusing all this stuff, which is pretty dang cool.
Account Confirmation via Dev Mailbox
Now, one thing that's really cool for localhost, since we just created this user, if we go to /dev/mailbox, you'll see we have just a really simple, you know, it's not very fancy UI or UX by any means, but we have like a little inbox, a little email server, I guess, that you could call it. And right here, it's confirmation instructions. So this is something we can actually send our users when we set up email. And then we can go to this URL that was generated for us with the Phoenix authorization auth code, I should say.
And if we go to this link, now we can just confirm our account. And now our account is confirmed. And if we pulled up the table to our user confirmation, the naive date stamp would be now. So that's pretty sweet. So out of the box, we have this whole authentication system.
Summary and Next Steps
And that's, that's that. Our project has been created. We've made significant strides in setting up our Phoenix framework-based application. We implemented user authentication with Phoenix's automated feature. We explored the schema and got our server up and running. We checked out the auto-generated authentication system. We registered a user, and we confirmed that account. We've laid a solid groundwork for our project.
If you need help or want to check out the source code, the GitHub link is in the description. Join my Discord server, Elixir Mentor, if you have any questions or just want to hang out and chat. That link is in the description as well. If you want to learn how to build scalable, production-ready, full stack and REST API solutions, hit that subscribe button now. I'm Jacob Blitzo, your Elixir Mentor. See you in the next video.
