How to import Firebase only on client in Sapper?

Akash Mittal

2 years ago

In this article you will learn How to import Firebase only on client in Sapper. Its a two step process which includes putting firebase scripts in template file and using in components.

Step1: Put firebase CDN links in global src/template.html file –

<body>
    ........
    ........
  <script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-firestore.js"></script>
</body>

Step2: Use Firebase in your component –

<script>
import { onMount } from 'svelte';
let database, authentication;

onMount(() => {
  database = firebase.firestore();
  authentication = firebase.auth();
});

const authHandler = () => {
  if (process.browser) {
    authentication
    .createUserWithEmailAndPassword()
    .catch(e => console.error(e));
  }
}
</script>

<button on:click={authHandler}>Sign up</button>

Tweet this to help others

Related Posts