Para with Svelte + Vite

If you haven’t already you can create a new Svelte project with Vite by following the official Vite docs.

​

Prerequisites

To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration.

​

Installing Dependencies

First, install both the Para React SDK and React dependencies:

npm install @getpara/react-sdk react react-dom

​

Setting Up the Svelte Preprocessor and Vite Polyfills

​

Svelte Preprocessor for React

You must configure your Svelte app to accept React components. For that, install and configure svelte-preprocess-react:

npm install svelte-preprocess-react

Then add it to your svelte.config.js:

import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import preprocessReact from "svelte-preprocess-react/preprocessReact";

export default {
  preprocess: [vitePreprocess(), preprocessReact()],
};

​

Vite Polyfills

Like other React-based setups, you may need Node.js polyfills for features like crypto, buffer, and stream. Install vite-plugin-node-polyfills:

npm install vite-plugin-node-polyfills --save-dev

Then configure it in vite.config.js or vite.config.ts:

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [svelte(), nodePolyfills()],
});

​

Setting Up the Para SDK

Now that you’ve installed the necessary dependencies, let’s set up the Para SDK in your Svelte application. This involves creating a client instance and integrating the Para Modal.

​

Creating a Para Client Instance

Much like in React or Vue, you’ll need a Para client instance. Keep it in a dedicated file (e.g., client/para.ts):

import { Environment, ParaWeb } from "@getpara/react-sdk";

const PARA_API_KEY = import.meta.env.VITE_PARA_API_KEY;
export const para = new ParaWeb(Environment.BETA, PARA_API_KEY);

​

Integrating the Para Modal in Svelte

With svelte-preprocess-react, you can directly use React components in Svelte:

<script lang="ts">
  import { ParaModal, OAuthMethod } from "@getpara/react-sdk";
  import "@getpara/react-sdk/styles.css";
  import { sveltify } from "svelte-preprocess-react";
  import Logo from "./assets/para-logo.svg";
  import { para } from "./client/para";

  // This turns the React component into something we can render in Svelte
  const react = sveltify({ ParaModal });

  let isModalOpen = false;
</script>

<div class="container">
  <button on:click={() => isModalOpen = true}>
    Open Para Modal
  </button>

  <!-- Render the React-based modal -->
  <react.ParaModal para={para} appName="Para in Svelte + Vite" logo={Logo} disableEmailLogin={false} disablePhoneLogin={false} oAuthMethods={Object.values(OAuthMethod)} isOpen={isModalOpen} onClose={() => isModalOpen = false}/>
</div>

<style>
 // Add your custom styles here
</style>

When you click Open Para Modal, the React-based Para Modal will appear inside your Svelte application.

​

Customizing the Para Modal

Just like in React, you can provide any additional props to the <ParaModal> component. For example, customizing theming:

<react.ParaModal para={para} isOpen={isModalOpen} theme={{ backgroundColor: "#FFF", foregroundColor: "#000", accentColor: "#FFA800", mode: "light" }}/>

For a full list of available ParaModalProps, refer to the customization guide:

​

Examples

For an example of using Para SDK in a Svelte application, check out our Examples Hub repository:

​

Troubleshooting

If you encounter issues during the integration or usage of the Para Modal in a Svelte-based app, here are some common problems and their solutions:

​

Next Steps

After integrating Para, you can explore other features and integrations to enhance your Para experience.