docs: with-remix-tpep_example

.github/workflows/test-examples.yml

@@ -30,9 +30,9 @@ jobs:
             - run: npm run build || true
             - run: |
                   (HOST= npm start & bash ../../test/waitForServerStartup.sh) && ( \
-                    (echo "=========== Test attempt 1 ===========" && npx mocha --no-config --timeout 80000 test/**/*.test.js) || \
-                    (echo "=========== Test attempt 2 ===========" && npx mocha --no-config --timeout 80000 test/**/*.test.js) || \
-                    (echo "=========== Test attempt 3 ===========" && npx mocha --no-config --timeout 80000 test/**/*.test.js) \
+                    (echo "=========== Test attempt 1 ===========" && npx mocha --no-config --timeout 80000 test/**/*.{test.js,test.cjs}) || \
+                    (echo "=========== Test attempt 2 ===========" && npx mocha --no-config --timeout 80000 test/**/*.{test.js,test.cjs}) || \
+                    (echo "=========== Test attempt 3 ===========" && npx mocha --no-config --timeout 80000 test/**/*.{test.js,test.cjs}) \
                   )
             - name: The job has failed
               if: ${{ failure() }}

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
+## [unreleased]
+
+## Added
+
+A demo Remix app for the third-party email password recipe to the `examples` folder. Also included is a basic test for the example app
+
 ## [0.38.0] - 2024-02-29
 
 ## Breaking Changes

examples/with-remix-thirdpartyemailpassword/.eslintrc.cjs

@@ -0,0 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

examples/with-remix-thirdpartyemailpassword/.gitignore

@@ -0,0 +1,3 @@
+/.cache
+/build
+/public/build

examples/with-remix-thirdpartyemailpassword/README.md

@@ -0,0 +1,91 @@
+![SuperTokens banner](https://raw.githubusercontent.com/supertokens/supertokens-logo/master/images/Artboard%20%E2%80%93%2027%402x.png)
+
+# SuperTokens ThirdPartyEmailPassword Remix Demo App
+
+This demo app demonstrates how to integrate SuperTokens into a Remix application.
+
+This SuperTokens/Remix integration achieves the following:
+
+- Initializes SuperTokens with frontend and backend configurations
+- Creates a frontend route to handle authentication-related tasks
+- Integrates the SuperTokens' login UI for secure user authentication
+- Protects frontend routes to ensure only authenticated users can access certain areas of the application
+- Exposes the SuperTokens authentication APIs used by frontend widgets
+
+## Project structure & Parameters
+
+```txt
+📦with-remix-thirdpartyemailpassword
+┣ 📂app
+┃ ┣ 📂config
+┃ ┃ ┣ 📜appInfo.tsx
+┃ ┃ ┣ 📜backend.tsx
+┃ ┃ ┗ 📜frontend.tsx
+┃ ┣ 📂routes
+┃ ┃ ┣ 📜_index.tsx
+┃ ┃ ┣ 📜api.auth.$.tsx
+┃ ┃ ┗ 📜auth.$.tsx
+┃ ┣ 📜app.css
+┃ ┣ 📜entry.server.tsx
+┃ ┗ 📜root.tsx
+┣ 📂assets
+┃ ┣ 📂fonts
+┃ ┣ 📂images
+┣ 📂test
+┃ ┗ 📜basic.test.cjs
+┣ 📜package.json
+┣ 📜remix.config.mjs
+┗ 📜server.mjs
+```
+
+Let's explore the important files:
+
+| Directory/File       | Description                                                                                     |
+| -------------------- | ----------------------------------------------------------------------------------------------- |
+| **app**              | Contains configuration files and route files for your application.                              |
+|                      | **config**                                                                                      |
+|                      | Contains configuration files for your application.                                              |
+|                      | `appInfo.tsx` : Includes information about your application reused throughout the app.          |
+|                      | `backend.tsx` : Backend-related configuration, including settings for SuperTokens.              |
+|                      | `frontend.tsx` : Frontend configuration, including settings for SuperTokens.                    |
+|                      | **routes**                                                                                      |
+|                      | Contains route files for your application.                                                      |
+|                      | `_index.tsx` : Represents the default route or landing page.                                    |
+|                      | `api.auth.$.tsx` : Handles authentication-related API endpoints.                                |
+|                      | `auth.$.tsx` : Deals with authentication routes or components using SuperTokens.                |
+|                      | `entry.server.tsx` : Entry point for server-side rendering (SSR) setup.                         |
+|                      | `root.tsx` : Root component of your application.                                                |
+| **test**             | Contains test files for your application.                                                       |
+|                      | `basic.test.cjs` : A basic test file, presumably for testing functionality in your application. |
+| **remix.config.mjs** | Remix configuration file containing settings for your Remix application.                        |
+| **server.mjs**       | File responsible for server-side functionality.                                                 |
+
+## Run application locally
+
+Follow the steps outlined below to run the application locally:
+
+1. Change directory to the **with-remix-thirdpartyemailpassword** folder.
+
+   ```shell
+   cd supertokens-auth-react/examples/with-remix-thirdpartyemailpassword
+   ```
+
+2. Run the command below to install the project dependencies:
+
+   ```shell
+   npm install
+   ```
+
+3. Run the application with the command below:
+
+   ```shell
+   npm run dev
+   ```
+
+## Author
+
+Created with :heart: by the folks at supertokens.com.
+
+## License
+
+This project is licensed under the Apache 2.0 license.