How to import Firebase only on client in Sapper?


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

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like

Svelte – Creating a CRUD application

Table of Contents Hide Read OperationCreate OperationUpdate OperationDelete OperationComplete CRUD codeLive DemoRelated Posts: In this article we will learn how to do operations like create, read, update and delete by…
View Post