supertokens · rishabhpoddar · Aug 29, 2024 · Aug 29, 2024 · Aug 29, 2024
diff --git a/examples/astro/with-thirdpartyemailpassword/package.json b/examples/astro/with-thirdpartyemailpassword/package.json
@@ -16,8 +16,8 @@
         "jsonwebtoken": "^9.0.2",
         "jwks-rsa": "^3.1.0",
         "micromatch": "^4.0.7",
-        "supertokens-node": "^20.0.2",
-        "supertokens-web-js": "^0.13.0",
+        "supertokens-node": "latest",
+        "supertokens-web-js": "latest",
         "typescript": "^5.5.4"
     },
     "devDependencies": {

diff --git a/examples/react/with-thirdpartyemailpassword/.gitignore b/examples/react/with-thirdpartyemailpassword/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react/with-thirdpartyemailpassword/README.md b/examples/react/with-thirdpartyemailpassword/README.md
@@ -0,0 +1,34 @@
+![SuperTokens banner](https://raw.githubusercontent.com/supertokens/supertokens-logo/master/images/Artboard%20%E2%80%93%2027%402x.png)
+
+# SuperTokens ThirdPartyEmailPassword Demo app for React
+
+This demo app demonstrates the following use cases:
+
+-   Social Login / Sign up
+-   Email & Password login
+-   Logout
+-   Session management & Calling APIs
+
+## Project setup
+
+Use `npm` to install the project dependencies:
+
+```bash
+npm install
+```
+
+## Run the demo app
+
+```bash
+npm run dev
+```
+
+The app will start on `http://localhost:3000`
+
+## Author
+
+Created with :heart: by the folks at supertokens.com.
+
+## License
+
+This project is licensed under the Apache 2.0 license.
diff --git a/examples/react/with-thirdpartyemailpassword/eslint.config.js b/examples/react/with-thirdpartyemailpassword/eslint.config.js
@@ -0,0 +1,25 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    { ignores: ["dist"] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+        },
+    }
+);
diff --git a/examples/react/with-thirdpartyemailpassword/index.html b/examples/react/with-thirdpartyemailpassword/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + React + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/examples/react/with-thirdpartyemailpassword/package.json b/examples/react/with-thirdpartyemailpassword/package.json
@@ -0,0 +1,37 @@
+{
+    "name": "react-supertokens",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "concurrently --kill-others \"npm run dev-server\" \"npm run dev-client\"",
+        "dev-client": "vite",
+        "dev-server": "tsx server.ts",
+        "lint": "eslint .",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "cors": "^2.8.5",
+        "express": "^4.19.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.1",
+        "supertokens-node": "latest",
+        "supertokens-web-js": "latest"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.9.0",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "concurrently": "^8.2.2",
+        "eslint": "^9.9.0",
+        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+        "eslint-plugin-react-refresh": "^0.4.9",
+        "globals": "^15.9.0",
+        "tsx": "^4.19.0",
+        "typescript": "^5.5.3",
+        "typescript-eslint": "^8.0.1",
+        "vite": "^5.4.1"
+    }
+}
diff --git a/examples/react/with-thirdpartyemailpassword/public/vite.svg b/examples/react/with-thirdpartyemailpassword/public/vite.svg
diff --git a/examples/react/with-thirdpartyemailpassword/server.ts b/examples/react/with-thirdpartyemailpassword/server.ts
@@ -0,0 +1,101 @@
+import express from "express";
+import cors from "cors";
+import supertokens from "supertokens-node";
+import { verifySession } from "supertokens-node/recipe/session/framework/express";
+import { middleware, errorHandler, SessionRequest } from "supertokens-node/framework/express";
+import Session from "supertokens-node/recipe/session";
+import EmailPassword from "supertokens-node/recipe/emailpassword";
+import ThirdParty from "supertokens-node/recipe/thirdparty";
+
+supertokens.init({
+    framework: "express",
+    supertokens: {
+        connectionURI: "https://try.supertokens.com",
+    },
+    appInfo: {
+        appName: "Hacking With SuperTokens",
+        apiDomain: "http://localhost:3001",
+        websiteDomain: "http://localhost:3000",
+        apiBasePath: "",
+        websiteBasePath: "/",
+    },
+    recipeList: [
+        EmailPassword.init(),
+        ThirdParty.init({
+            // We have provided you with development keys which you can use for testing.
+            // IMPORTANT: Please replace them with your own OAuth keys for production use.
+            signInAndUpFeature: {
+                providers: [
+                    {
+                        config: {
+                            thirdPartyId: "google",
+                            clients: [
+                                {
+                                    clientId:
+                                        "1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com",
+                                    clientSecret: "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",
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        config: {
+                            thirdPartyId: "github",
+                            clients: [
+                                {
+                                    clientId: "467101b197249757c71f",
+                                    clientSecret: "e97051221f4b6426e8fe8d51486396703012f5bd",
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        config: {
+                            thirdPartyId: "apple",
+                            clients: [
+                                {
+                                    clientId: "4398792-io.supertokens.example.service",
+                                    additionalConfig: {
+                                        keyId: "7M48Y4RYDL",
+                                        privateKey:
+                                            "-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----",
+                                        teamId: "YWQCXGJRJL",
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        }),
+        Session.init(), // initializes session features
+    ],
+});
+
+const app = express();
+
+app.use(
+    cors({
+        origin: "http://localhost:3000",
+        allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],
+        methods: ["GET", "PUT", "POST", "DELETE"],
+        credentials: true,
+    })
+);
+
+app.use(middleware());
+
+app.get("/sessioninfo", verifySession(), async (req: SessionRequest, res) => {
+    const session = req.session;
+    res.send({
+        sessionHandle: session!.getHandle(),
+        userId: session!.getUserId(),
+        accessTokenPayload: session!.getAccessTokenPayload(),
+    });
+});
+
+// In case of session related errors, this error handler
+// returns 401 to the client.
+app.use(errorHandler());
+
+app.listen(3001, () => console.log(`API Server listening on port 3001`));
diff --git a/examples/react/with-thirdpartyemailpassword/src/App.css b/examples/react/with-thirdpartyemailpassword/src/App.css
@@ -0,0 +1,132 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+a:hover {
+    color: #535bf2;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+button {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+    color: rgba(255, 255, 255, 0.87);
+}
+button:hover {
+    border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+    a:hover {
+        color: #747bff;
+    }
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+.form-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    max-width: 320px;
+}
+
+.form-wrap input {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    border: 1px solid #646cff;
+    border-radius: 8px;
+    padding: 0.6em 1em;
+    font-size: 1em;
+    font-family: inherit;
+}
+
+div.wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1em;
+    height: 100vh;
+    width: 100vw;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+div.wrapper header {
+    height: 80px;
+    background: #ff9933;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+div.wrapper main {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 60%;
+}
+
+div.wrapper footer {
+    height: 60px;
+    background: #1f1f1f;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}