02 Serverless Systems.md

# 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](https://firebase.google.com), 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](https://firebase.google.com/docs/cli#install_the_firebase_cli) 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:

```shell
$ 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](https://support.google.com/firebase/answer/6399760?hl=en) by running the following command:

```shell
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.

```shell
$ 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](https://console.firebase.google.com) 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:

```shell
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:

```shell
$ 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:

```shell
$ 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.

-------

```html
<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>
```