How I created my login

Creating a login is hard, here is how I did it.

We are living in changing and unprecedented times. Homelessness is on the rise across America and I felt there was a need that needed to be filled.

I wanted to create an app that was designed to help look for resources for those who are facing houselessness. In today’s society, we have a growing problem with the gap in wealth and we need to be able to create resources for people who are facing houselessness.

Credits: givingcompass.org

For these purposes, I want to share with you how I created my login.

This is how I created my login.

• First I decided to work on my back end and create an API for the user to fetch resource listings and other things. I created a model called residents. I then put into the terminal rails g controllers and sessions for my instances.

Residents as users

In the Residents model, I created :name, password; using the bcrypt gem, I created has_secure_password in order for the user to be able to save in their sign-up sheet and log in. For residents, I made login credentials (i.e. username and password.) I used a secure password on top so that way the password would not be compromised. After that, I then migrated my database and seeded them. Lastly, I focused on the react portion of my app.

For the react portion of this app, I then added a few components for the app but for the main purpose for this I’ll mainly talk about the residents (users) and Shelters (the cards I made). Starting with residents, I created the signup and login and named them Login.js and Signup.js.

In the Login.js, I made two inputs and a handleSubmit. Inside the handlSubmit, I have a preventDefault and a useEffect. For the onLogin, I created a function called handleLogin and passed it down as onLogin into the component.

Another component I made was the Navbar. Inside the Navbar, I made a logout function that would delete the user’s session from the interface. With that said, I made a login container for my login component and created a ternary for my two components. Inside the ternary, I made a {user.resident.name} to show the user’s name on the screen. That way the user could not only see themselves on the screen but see they are logged in.

And that is how I created my login, for more information and to see it deployed here are the links below.

GitHub: https://github.com/villa-jon/project-template-react-rails-api

Heroku: https://rails-react-project-1.herokuapp.com/home