savvy-firebase/firebase.md

# Firebase

API documentation (JS): <https://firebase.google.com/docs/reference/js>
Guides documentation: <https://firebase.google.com/docs/guides>

Handling errors

List of errors: <https://firebase.google.com/docs/reference/js/firebase.auth.Auth#createuserwithemailandpassword>

You can catch the error and use if/else to capture the specific error.

```javascript
firebase.auth().createUserWithEmailAndPassword(email, password)
    .catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  if (errorCode == 'auth/weak-password') {
    alert('The password is too weak.');
  } else {
    alert(errorMessage);
  }
  console.log(error);
});
```

Firebase User object:
<https://firebase.google.com/docs/reference/js/firebase.User>

All properties that it takes/available listed above

## Create new User

Use `firebase.auth().createUserWithEmailAndPassword(email, password)` to create a new user.

Only an email address and password is needed to create a new account. The user itself has a few additional attributes you can attach to it - the `displayName` and the `photoURL` among a few others. You can see all of them in the properties of the user object:
`https://firebase.google.com/docs/reference/js/firebase.User#properties`

Any additional information you want to store alongside the user should use a firestore. You should have a collecton for users, then each document should be named after the `User.uid` and contain the additional data you want to store.

## Update password/email

The instructions to update a password/email:
<https://firebase.google.com/docs/auth/web/manage-users#re-authenticate_a_user>
mention using `reauthenticateWithCredential`. This is only needed if using a 3rd party auth method which returns this credential object. If using native firebase logins then simply forcing the user to resign in is sufficient.

## Adding material icons to Vuetify project

`yarn add @mdi/font -D`


## Controlling layouts

### Spacing

<https://vuetifyjs.com/en/styles/spacing/>

You can use helper classes to apply custom margins/padding to elements.

You can apply padding to left: `class="pl-3"`.
Or apply margin to all: `class="ma-4"`.

You can use this to center objects without using flex:
`class="mx-auto"`.

### Display helpers

The display helpers allow you to control the dispaly of content. These can be used to hide/show elements based on the current viewport, or the actual display element type.

<https://vuetifyjs.com/en/styles/display/>

### Hide/Display elements for different widths

You can hide specific viewport sizes with:
<https://vuetifyjs.com/en/styles/display/#visibility>

`d-flex` by default without any size will apply to `xs` and above.

You can make things visible only on one viewport with:
`class="d-none d-lg-flex d-xl-none"`

You can make things hide only on one viewport with:
`class="d-lg-none d-xl-flex"`

You can hide multiple by using combinations of the above, or, use the following lateral display helper classes:
`class="hidden-md-and-up"` and `class="hidden-sm-and-down"`

### flex

Using flex will make the object fill the entire viewport, rather than adhering to the margins/widths by default. There is a lot more to flex - you can make things align left/right, vertical alignment and more:
<https://vuetifyjs.com/en/styles/flex/#flex>

### cols

In a `<v-row>` you can have many `<v-col>`. You can have as many of these and use the `cols` prop to control how wide the content should be.

```html
<v-col cols="4" class="appTitle d-flex justify-start">
    <v-toolbar-title>
    Savvy Firebase tutorial
    </v-toolbar-title>
</v-col>
```

You can combine this with `d-flex` and justify to control the positioning and alignment:

<https://vuetifyjs.com/en/styles/flex/#flex-justify>

Justify classes include:

- `justify-start`
- `justify-end`
- `justify-center`
- `justify-space-between`
- `justify-space-around`

Using `cols`, `d-flex` and `justify` you can control precisely how things should be laid out for different screen sizes.

- Use `<v-col>`, use the prop `cols=""` to control how wide it should be.
- Use `<v-spacer>`, to dynamically fill space.
- Use `class="d-flex"` and the justify classes.
- Use `class="d-none d-xl-flex"` to control layouts for different sizes.
- Use `class="hidden-md-and-up"` to quickly control layouts for different sizes.

### Dual layouts

You can have the same html element for different sizes.

The layout you want for the screen you want to break on should **not** include it.

For example, to break on the medium viewport and have the second layout apply to it:

```html
<v-app-bar flat color="indigo" app class="hidden-md-and-up"></v-app-bar>
<v-app-bar flat color="indigo" app class="hidden-sm-and-down"></v-app-bar>
```

Here the second layout does not include the medium layout, hence the medium layout will apply to it.


## App bar

### Gradient as a background colour

The background image to the app bar is provided with a `src` prop.

If you want to apply a fade gradient colour on top of the image, you should use a scoped slot:

```html
<v-app-bar
    flat
    app
    class="hidden-sm-and-down"
    src="https://www.stellamccartney.com/cloud/smcwp/uploads/2016/01/1920x1080-black-solid-color-background.jpg"
>
    <template v-slot:img="{props}">
    <v-img
        v-bind="props"
        gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
    ></v-img>
    </template>
```

If you want to just use a gradient (no img), then apply a solid colour image and then use a scoped slot with the gradient you want.


To do