Search⌘ K
AI Features
Home
Courses
Full-Stack Web Applications with Firebase

Authentication Forms

Explore how to build and style authentication forms in Firebase, including sign-in, create user, and forgot password forms. Learn to toggle between forms smoothly within a modal and apply CSS to enhance user experience.

We'll cover the following...

HTML for the Forms #

We are going to have three separate forms, each to complete a different task.

The name of the forms explain what they do:

  1. Create user form
  2. Sign in form
  3. Forgot password form

The HTML is straightforward and short so I am going to present all of it to you right now. All forms go inside your modal.

HTML
	<!-- Modal -->
	<div id="modal">
		<div id="modal-content">
			<button id="close">&times</button>
			<!-- Authentication -->
			<div id="authentication">
				<!-- Create user form -->
				<form id="create-user-form">
					<div id="create-user-inputs">
						<input type="text" id="create-user-display-name" placeholder="Display Name" required
							autocomplete="off">
						<input type="email" id="create-user-email" placeholder="Email" required autocomplete="off">
						<input type="password" id="create-user-password" placeholder="Password" required
							autocomplete="off">
					</div>
					<button id="create-user-button" class="purple-button" type="submit">Create User</button>
				</form>
				<!-- Sign in form -->
				<form id="sign-in-form">
					<div id="sign-in-inputs">
						<input type="email" id="sign-in-email" placeholder="Email" required autocomplete="off">
						<input type="password" id="sign-in-password" placeholder="Password" required autocomplete="off">
					</div>
					<div id="forgot-password-link" class="auth" auth="show-forgot-password-form">Forgot?</div>
					<button id="sign-in-button" class="purple-button" type="submit">Sign In</button>
				</form>
				<!-- Forgot password form form -->
				<form id="forgot-password-form">
					<div id="forgot-password-inputs">
						<input type="email" id="forgot-password-email" placeholder="Email" required autocomplete="off">
					</div>
					<button id="forgot-password-button" type="submit">Send Recovery Email</button>
				</form>
			</div>
		</div>
    </div>

Style the Forms #

We add this CSS to make your forms look good.

NAME_
CSS
input{
    width: 100%;
    font-size: 20px;
    padding: 10px 0px 10px 0px;
    border-width: 0px 0px 2px 0px;
}
input::placeholder{
    color: #989898
}
input:focus{
    border-color: green;
    outline: none;
}
#sign-in-link, #create-user-link{
    color: #32a1d7
}
#create-user-inputs, #sign-in-inputs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin-bottom: 30px;
}
#create-user-display-name{
    grid-column-end: span 2;
}
#forgot-password-inputs{
    margin-bottom: 20px;
}
#forgot-password-link{
    text-align: right;
    font-size: 10px;
    margin-top: -17px;
}

Access the forms #

From your JavaScript, get access to the forms by using the querySelector.

We need to do this for two reasons:

  1. Creating functionality to toggle between the forms. This is what we are handling in this lesson.

  2. Ability to submit the form information to Firebase to authenticate our users, or reset a password. We will do this in an upcoming lesson.

Javascript (babel-node)
// Access the forms for email and password authentication
const createUserForm = document.getElementById('create-user-form')
const signInForm = document.getElementById('sign-in-form')
const forgotPasswordForm = document.getElementById('forgot-password-form')

The hide Class

...