Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

cloud/02 Serverless Systems.md

Go to file
 
 
Cannot retrieve contributors at this time
Authentication 1 Installing the Firebase CLI Tools 2 Creating a New Project 3 Deployment
108 lines (76 sloc) 5.36 KB
Raw Blame
Open in GitHub Desktop

Authentication

In this lab you will be configuring an existing Single-Page Application (SPA) to authenticate using Firebase and to deploy the app to the Firebase cloud hosting.

Your first task is to access the Firebase homepage, log in using a Google account and then access the Console using the button in the top-right of the homepage.

1 Installing the Firebase CLI Tools

Install the firebase-tools. There are detailed instructions for most common operating systems. For Linux or MacOS, the automatic install script is recommended and for Windows the CLI Binary. Note that this can take some time.

Once the tools are installed you need to shut down and restart your shell (terminal or cmd) then navigate to the exercises/01_auth/ directory. Next log in:

$ firebase login

This will fire up your default browser and obtain permissions from your chosen Google account.

2 Creating a New Project

You will find the code for the SPA in the exercises/01_auth/ directory, make sure your shell has this as its current directory before you start.

The first step is to create a new Firebase Project by running the following command:

firebase projects:create

You will be prompted for your preferred project id, this can't be one that is in use by anyone else! A good suggestion might be your University username followed by a dash then the name of the project, eg. doej-todo. Once this step is complete you can view a list of your projects.

$ firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────┬──────────────┬──────────────────────┐
│ Project Display Name │ Project ID   │ Resource Location ID │
├──────────────────────┼──────────────┼──────────────────────┤
│ todo                 │ aa7401-todo  │ us-central           │
└──────────────────────┴──────────────┴──────────────────────┘

Now you need to register the web app in the 01_auth/ directory. Navigate to the correct directory using your shell.

Go to the Firebase console whre you should find the project you created. Select it and use the round button in the top bar to add a Web App. Choose any name you want for the app alias. You should then be presented with the config settings to add to your app. All you need is the fireaseConfig object. Copy this and paste it into the top of the script.js file, overwriting the existing values.

We need to enable authorisation. You can find the Authentication tab in the project console online. Choose Set up sign-in method and, from the list enable Email/Password (don't enable the passwordless sign-in).

We can now run the app locally, replacing xxxxxx with the Project ID taken from the table containing your projects:

firebase server --project xxxxxx

You can browse the app at localhost:5000. Try registering an account, it will appear in the Authentication console under the Users tab.

3 Deployment

Now you need to configure the app, note the correct responses for each question are shown:

$ firebase init hosting
  ? What do you want to use as your public directory? [public]
  ? Configure as a single-page app (rewrite all urls to /index.html)? [No]
  ? File public/404.html already exists. Overwrite? [No]
  i   Skipping write of public/404.html
  ? File public/index.html already exists. Overwrite? [No]
  i   Skipping write of public/index.html
  i   Writing configuration info to firebase.json...
  i   Writing project information to .firebaserc...

  ✔   Firebase initialization complete!

To deploy the current files to the cloud host:

$ firebase deploy
  === Deploying to 'aa7401-todo'...

  i  deploying database, hosting
  i  database: checking rules syntax...
  ✔  database: rules syntax for database aa7401-todo is valid
  i  hosting[aa7401-todo]: beginning deploy...
  i  hosting[aa7401-todo]: found 4 files in public
  ✔  hosting[aa7401-todo]: file upload complete
  i  database: releasing rules...
  ✔  database: rules for database aa7401-todo released successfully
  i  hosting[aa7401-todo]: finalizing version...
  ✔  hosting[aa7401-todo]: version finalized
  i  hosting[aa7401-todo]: releasing new version...
  ✔  hosting[aa7401-todo]: release complete

  ✔  Deploy complete!

  Project Console: https://console.firebase.google.com/project/xxxxxx/overview
  Hosting URL: https://xxxxxx.web.app

You should now be able to go to the provided URL where you site will be live. Since the locally hosted version connected to the Firebase cloud you should find that tha account you created is still there.

<iframe width="425" height="350" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-1.47,52.39,-1.49%2C52.41&layer=mapnik&marker=52.4058624,-1.4876672" 
style="border: 1px solid black"></iframe>