SendGrid Svelte

This tutorial is an extension of the [SendGrid Transactional Email Guide](/lessons/sendgrid-transactional-email-guide/). You must have the Cloud Functions deployed to start sending email from your frontend app.

Initial Setup

Start by installing the Firebase Web SDK, then initialize the packages in the root of the project.

file_type_js_official firebase.js
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/functions';

const config = {
 // your firebase config


export const app =;
export const auth = firebase.auth();
export const functions = firebase.functions();

Transactional Email Component

The Svelte component uses the onMount lifecycle hook to monintor to the user’s auth state, while sendEmail references the callable function deployed to Firebase.

	import firebase from 'firebase/app';
	import { auth, functions } from './firebase';
	import { onMount } from 'svelte';

	let user = null;

	onMount(async () => {
		auth.onAuthStateChanged(u => user = u);

	function sendEmail() {
		const callable = functions.httpsCallable('genericEmail');
		return callable({ text: 'Sending email with Svelte and SendGrid is fun!', subject: 'Email from Svelte'}).then(console.log);
<h2>SendGrid Transactional Email with Svelte</h2>

{#if user}
	<p>{ JSON.stringify(user) }</p>
    <button on:click={() => sendEmail()}>Send Email with Callable Function</button>
    <button on:click={() => auth.signOut()}>SignOut</button>

	<button on:click={() => auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())}>SignIn with Google</button>


Ask questions via GitHub below OR chat on Slack #questions