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.

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.

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

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

<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