Skip to content

Latest commit

 

History

History
150 lines (106 loc) · 7.35 KB

README.md

File metadata and controls

150 lines (106 loc) · 7.35 KB
Raw

Angular Userbase Demo

Demo

There is a live demo deployed via netlify! Check it out here: live demo.

Netlify Status

About

There are two things I love developing with, the first is the SPA framework Angular and the second is the End to End Encryption serverless SDK Userbase. Angular is a great framework for developing web apps and Userbase gives you the tools to build a secure but dynamic, affordable web app without the hastle of worrying about a backend. I built this demo to show how easy it is to set up in Angular with the hopes that our community can build web apps with an amazing secure solution that is Userbase.

🧐 What's inside and what you should know for this project

.
└── src
    └── app
        ├── contracts
        └── core
            ├── forgot-password
            ├── initialization-error
            ├── sign-in
            ├── sign-up
        └── private
            ├── account
            ├── files
            ├── shared
            └── todos
        └── shared
        app-routing.module.ts
        app.**.*
        userbase.service.ts
  1. /contracts: Contains all additional types/interfaces we need to properly type our application. For example, interfaces for todos, files, and Userbase errors.
  2. /core: This directory contains all core components that are only visible to unauthenticated users.
    1. /forgot-password: The forgot password page.
    2. /initialization-error: The initialization error page.
    3. /sign-in: The sign in page.
    4. /sign-up: The sign up page.
  3. private: This directory contains all components that are only visible to authenticated users.
    1. /account: The account page.
    2. /files: The files page.
    3. /shared: Shared folder for any services, modules, etc. that might be needed in the private module.
    4. /todos: The todos page.
  4. /shared: This directory contains all shared services, modules, etc. that might be needed for unauthenticated pages.
  5. .app-routing.module.ts: The base routing file for our application.
  6. .app**.*: The base app component for our application.
  7. userbase.service.ts: The userbase service that contains our base functions like initializing the SDK, sign in, sign out, etc.

Initializing Userbase

Userbase is a serverless SDK, so we have to initialize the SDK before we use it. In order to do this I've incorporated the intialization process in our /shared/private.guard.ts (protects modules and pages behind authentication) and /shared/public.guard.ts (redirects users from pages like sign in, sign up, and forgot password when they're already logged in).

If you look in both guards you will see we follow this process:

  1. Determine if the SDK has been initialized
  2. If it has, determine if the user is authenticated and perform logic. If not and the error was ServiceUnavailable, redirect the user to /500

One handy feature I've implemented on the /500 page is the ability to continue attempting to initialize the SDK upon server failure. You will see in /core/initialization-error/initialization-error.component.ts that we retry initializing the SDK every 5 seconds indefinitely. If we are able to initialize the SDK, we redirect them to /signin if they're unauthorized or /app/todos if they're logged in.

Sign Up

Signs the user up and automatically logs them in (this is out of the box functionality).

Sign In/Out

Signs the user in and redirects them to /app/todos. Also signs the user out and redirects them to /signin.

Forgot Password

Submit Request

Submits a forgot password request, which off screen I go to my email and copy my temporary password.

Log In with Temporary Pass -> Change Password

I then take my temporary password and log in. Once logged in I am automatically redirected to the /app/account page where I am asked to change my password (using my temporary password) before I continue using the application.

Create, Update, and Delete Items

Creates (new todo), updates (sets completed state of todo), and deletes todos.

Share Databases

Shares the user's todos database with other users via their username.

Upload Files

Uploads files to the users account. I provided an example with a file that is large and takes time to upload (the gif was sped up I believe 2 or 2.5 times to decrease the gif's file size, so it will be slower than shown).

Manage Account

Allows the user to update their email given on log in, change their password, and delete their account.

Default Angular Generated README.md Content

This project was generated with Angular CLI version 10.0.5.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.