Angular, Node, and PostgreSQL: Forgot Password

Prerequisites

You should be able to follow this story and stand up your own Forgot Password workflow utilizing Firebase. However, if you’re curious, this is a continuation of the following previous stories:

Today’s story will showcase how we can use AngularFireAuth to create a password recovery workflow.

Page / Form Design

We are going to design the pages just like login and register. So we can reuse a lot of our CSS we already have setup 🎉! The only change we have to make is within our authentication.component.css. We will have navigation links that share the samefont-weight and color. Modify the CSS line .form-section .register…


AngularJS to Angular and more … my personal journey ❤️☕️

Prerequisites

This story is a continuation of another story regarding Angular authentication with Firebase and storing the user information within PostgreSQL. You can read the original story below:

Today’s story will showcase how we can make a registration form to allow our visitors to create a new account in Firebase using an email/password.

Page / Form Design

For a reminder, this is what we want our page to look like and some of the classes I will be referencing are from the story, Firebase Authentication: Setup & Shared Design:


AngularJS to Angular and more … my personal journey ❤️☕️

Prerequisites

This article will assume you already have PostgreSQL setup and installed on your machine and that you have knowledge of SQL. A nice resource is Getting Started with PostgreSQL and I’ve always enjoyed using DBeaver Community as my database administration tool.

Let’s get started …

From the story above, we have the ability to authenticate with the help of Firebase Authentication and we get a response back with some basic information. I capture this data into the IUser interface.

interface IUser {
uid: string;
email: string;
photoURL?: string;
displayName?: string;
emailVerified: boolean;
}

PostgreSQL or NoSQL

TLDR…


Autonomous.ai Review

I have always heard that when you switch to multiple monitors it’s very hard to go back. I would totally agree with this statement. I use them on a daily basis and the additional screen provides extra real estate when I am working.

As a developer, I like to see many things at the same time: the code that is under development, a debugging screen that shows the current internal state of the program as it runs, and the screen display of the program that is being developed. …


AngularJS to Angular and more … my personal journey ❤️☕️

👋😷 Hope everyone is doing well

I know it’s been a while since my last post, almost a year! My journey with Angular 7 took a pause, but Angular did not. They are already up to version 10 😮

If you forgot how this journey began feel free to time travel to the first post.

Today’s story will be short and sweet 🍬. I am taking my Angular 7 project and updating it to 10.

You might think moving an application across major versions to be scary. Depending on the size of the application this is…


AngularJS to Angular 7 and more … my personal journey ❤️☕️

Welcome Back 👋

This is the continuation of many stories that all started from this first Medium post.

Today’s story will cover getting the Login component created and wired up for authentication with Firebase.

Prerequisites

Before we begin make sure you have followed the two previous stories:

🐘 I want to use PostgreSQL instead of Firestore

Check out my other stories that refactor the logic to use PostgreSQL

🚀 Let’s get started!

We need a new component for login, but since we are lazy loading we want to skip the importing to the NgModule. We also don’t want to create any test files. …


Credit: https://www.pexels.com/photo/white-printer-paper-196645/

AngularJS to Angular 7 and more … my personal journey ❤️☕️

Welcome Back 👋

This is the continuation of many stories that all started from this first Medium post.

Today’s story will cover getting our project set up for authentication. Before we create any components we should make some design decisions. I also thought it would be an easier read if I would write separate stories for each component as its built (ex. Login, Register, etc.)

Enough of me jabbering, let’s get some of these core pieces in place.

Below are two examples of what I am thinking for the design 💭


AngularJS to Angular 7 and more … my personal journey ❤️☕️

Welcome Back 👋

This is the continuation of many stories that all started from this first Medium post.

Overview

I want to write about Firebase Authentication but came to realize there are a lot of parts to covering this. So I need to break this down into smaller stories. We will be learning how to set up and build the components of the authentication process. We will use Firebase Authentication (Login, Register, Forgot Password, and Reset Confirm). Also, get into how to write to Firestore and lock that data down using security rules.

Why are you doing this?


AngularJS to Angular 7 and more … my personal journey ❤️☕️

Welcome Back 👋

This is the continuation of many stories that all started from this first Medium post.

I think it’s about time I get started on my project, aWe Motors. Let’s start by creating a simple Welcome page. Nothing too fancy at the moment, but it should have the following:

Sticky navigation with company name and an icon for future login functionality.

AngularJS to Angular 7 and more … my personal journey ❤️☕

Welcome Back 👋

This is the continuation of many stories that all started from this first Medium post.

So we have this great project idea and we want to get it out to the world. What are we waiting for? Let’s take the leap and start writing code … “Whoa there hold your horses” 🐴

Before we get to writing that awesome code, we must take a moment and realize that our logic will break. We need a way to handle those errors when they occur.

Try / Catch

We could add try/catch blocks to…

Zach Olson

Experienced Web Designer and Information Architect, Visionary Entrepreneur and Investor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store