Remix Supertokens

Overview

This product analysis is about Remix Supertokens, a repository that demonstrates how to use Remix, a tool for building SSR web applications in React, with SuperTokens, an open source alternative to user authentication. This repository focuses on using the EmailPassword recipe/approach from SuperTokens. The application takes an SSR-only approach for better security, guaranteed progressive enhancement, and easier code management. The repository provides instructions on how to run the app and includes some important considerations.

Features

• Integration of Remix with SuperTokens for user authentication in SSR web applications
• Usage of the EmailPassword recipe/approach from SuperTokens
• Better security with SSR-only approach
• Guaranteed progressive enhancement for a better user experience
• Easier code management for more efficient development

Installation

Follow these steps to install the Remix Supertokens theme:

1. Start the SCSS-to-CSS compiler by running npm run sass. This is necessary because Remix only reads CSS files, not SCSS files.
2. Start the dev server by running npm run dev.
3. Add your own .env file to configure SuperTokens. You will need to configure the following variables:
   • DOMAIN (e.g., http://localhost:3000)
   • SUPERTOKENS_CONNECTION_URI (e.g., https://try.supertokens.com)
   • SUPERTOKENS_API_KEY (optional if your SUPERTOKENS_CONNECTION_URI is https://try.supertokens.com)
   • SUPERTOKENS_WEBSITE_DOMAIN (e.g., http://localhost:3000)
   • SUPERTOKENS_API_DOMAIN (e.g., http://localhost:3000)
   • SUPERTOKENS_API_BASE_PATH (e.g., /auth)

Summary

Remix Supertokens is a repository that showcases the integration of Remix and SuperTokens for building SSR web applications with user authentication. It provides a step-by-step guide for installation and highlights the advantages of using an SSR-only approach for better security, progressive enhancement, and code management. The repository also includes important considerations for using ESM and Remix’s file routing system.