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 –

  <script src=""></script>

  <!-- Add Firebase products that you want to use -->
  <script src=""></script>
  <script src=""></script>

Step2: Use Firebase in your component –

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

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

const authHandler = () => {
  if (process.browser) {
    .catch(e => console.error(e));

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

    Tweet this to help others


About the Author


I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

View All Articles