1. 14
    Create an Authentication Page Template with Ionic Page Generation
    1m 57s

Create an Authentication Page Template with Ionic Page Generation

Jorge Vergara
InstructorJorge Vergara
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated a year ago

Now it's time to create a template for our authentication page using Ionics page generation CLI.

We'll show how to use the same page for all of our authentication operations by reading the parameters from the URL and displaying the right form elements and buttons depending on the parameters present.

Jorge Vergara: [0:01] To start working on our authentication feature, we are going to create a new page for authentication. We are going to handle login, signup, and password reset on the same page.

[0:18] For that, we have created an authentication form. This has the email, password, it has the submit button and the page has two links, Forgot Password and Create Account. When a user clicks on Forgot Password, they are going to come to reset password. When they click on Create Account, they are going to go to the Create Account page.

[0:40] In our class, what we are doing is that we are injecting ActivatedRoute into our constructor and with that we are getting from the URL, if you see here, I can go into the auth-routing.module. We have to route the base route and the authMode route.

[1:01] They are both going to the AuthPage. This page is reading the URL from here and depending if it is login, reset, or signup, it's going to set everything up for us. It's going to add the page title so that it appears here either Login, Reset Password, or Create Account.

[1:23] In the template, you see that this container here, the one that shows at the specific buttons, it's only going to appear if the user is in the login mode. As soon as the user moves to, let's say, Create A New Account, we are in signup mode and those buttons won't appear.

[1:42] If I go back and I go to Forgot Password, you see that I have only one field, email, and that's because the password only appears when the authMode is different from reset.

egghead
egghead
~ 5 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today