Skip to content
Code Monster Logo Code Monster Logo Code Monster

Account creation

Setting up a user account is a common task for web applications. In this guide, you’ll learn how to set up a user account in Epic News.

The signup screen

Section titled “The signup screen”

In the address bar of your browser, navigate to the /signup route:

Epic News signup URL
http://localhost:3000/signup

Epic News signup screen

As you can see, there are two ways to sign up for an account: with an email address and password, or with GitHub as single-sign-on (SSO) provider.

In this guide, we will cover the simple email/password method, and configure SSO in the next step.

Email and password method

Section titled “Email and password method”

By far the most common way to sign up for an account is with an email address and password.

Enter a dummy email address

Section titled “Enter a dummy email address”

To get started, fill out an easy-to-remember dummy email address. Something like example@email.com will do.

Click “Submit”.

Enter dummy email

Check the confirmation email

Section titled “Check the confirmation email”

After you submit the form, you’ll see a message that says “Check your email”, and an input box to enter the confirmation code.

If this were a production website, we would have configured the email service to send a confirmation email to the address you entered. However, on localhost, this isn’t possible.

Instead, a dummy email is generated and displayed in the terminal. Head back to the VS Code terminal and you will see a message printed in green text.

This is the plain text version of the email that would have been sent to the user in a production environment. Hover over the link and CTRL + click (or CMD + click on Mac) to confirm your email address.

Dummy email confirmation

The same form as the one earlier will appear, but this time with the confirmation code input pre-filled. Click “Submit” to confirm your email address.

User details

Section titled “User details”

Fill in your dummy user details in the next screen, accept the Terms of Service, and click “Create an account”:

Onboarding screen

Account created

Section titled “Account created”

You will be redirected to the home page, and you will see your first ‘toast’ confirmation page appear briefly at the top of the page. We will learn how to create custom toast messages later.

Account created

Summary

Section titled “Summary”

In this guide, you learned how to create a user account in Epic News using a simple email and password. You also learned how to confirm your email address and fill in your user details.

In the next guide, you’ll learn how to set up Single Sign On (SSO) using Github as the provider.

:::