add backend code

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

README.md

@@ -16,6 +16,22 @@ Use `npm` to install the project dependencies:
 npm install
 ```
 
+# Providers credentials
+
+Copy the `.env.example` file: 
+
+```bash
+   cp .env.example .env.development.local
+```
+
+Please refer to the corresponding documentations to get your client ids and client secrets for each of the providers you want to integrate with:<br/>
+  - <a href="https://developers.google.com/identity/sign-in/web/sign-in#create_authorization_credentials" rel="noopener noreferrer" target="_blank" >Google</a><br/>
+  - <a href="https://docs.github.com/en/developers/apps/creating-an-oauth-app" rel="noopener noreferrer" target="_blank" >Github</a><br/>
+  - <a href="https://developers.facebook.com/docs/development/create-an-app" rel="noopener noreferrer" target="_blank" >Facebook</a><br/>
+</div>
+
+Set redirect URI to `http://localhost:3000/auth/callback/{providerId} in each developer panels.
+
 ## Run the demo app
 
 This compiles and serves the React app and starts the backend API server on port 3001.
@@ -34,6 +50,7 @@ The app will start on `http://localhost:3000`
    - `REACT_APP_WEBSITE_PORT`: To change the port of the website server. The default is `3000`
    - `REACT_APP_WEBSITE_URL`: In case the website is not hosted on `localhost`. This must contain the port as well.
 
+
 ## Deployment
 
 ### Compiles and minifies for production

api-server.js

@@ -2,15 +2,17 @@ const express = require("express");
 const cors = require("cors");
 const morgan = require("morgan");
 const helmet = require("helmet");
+require('dotenv').config();
 let supertokens = require("supertokens-node");
 let Session = require("supertokens-node/recipe/session");
-let EmailPassword = require("supertokens-node/recipe/emailpassword");
+let ThirdParty = require("supertokens-node/recipe/thirdparty");
 
 const apiPort = process.env.REACT_APP_API_PORT || 3001;
 const apiDomain = process.env.REACT_APP_API_URL || `http://localhost:${apiPort}`;
 const websitePort = process.env.REACT_APP_WEBSITE_PORT || 3000;
 const websiteDomain = process.env.REACT_APP_WEBSITE_URL || `http://localhost:${websitePort}`
 
+
 supertokens.init({
     supertokens: {
         connectionURI: "https://try.supertokens.io",
@@ -21,7 +23,24 @@ supertokens.init({
         websiteDomain
     },
     recipeList: [
-        EmailPassword.init(),
+        ThirdParty.init({
+            signInAndUpFeature: {
+                providers: [
+                    ThirdParty.Google({
+                        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+                        clientId: process.env.GOOGLE_CLIENT_ID
+                    }),
+                    ThirdParty.Github({
+                        clientSecret: process.env.GITHUB_CLIENT_SECRET,
+                        clientId: process.env.GITHUB_CLIENT_ID
+                    }),
+                    ThirdParty.Facebook({
+                        clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
+                        clientId: process.env.FACEBOOK_CLIENT_ID
+                    })
+                ]
+            }
+        }),
         Session.init()
     ]
 });
@@ -53,7 +72,6 @@ app.get("/sessioninfo", Session.verifySession(), async (req, res) => {
     });
 });
 
-
 app.use(supertokens.errorHandler());
 
 app.use((err, req, res, next) => {

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.0",
     "cors": "^2.8.5",
+    "dotenv": "^8.2.0",
     "helmet": "^4.4.0",
     "morgan": "^1.10.0",
     "npm-run-all": "^4.1.5",

src/Home/index.js

@@ -3,7 +3,7 @@ import Logout from "./Logout";
 import SuccessView from "./SuccessView";
 import Session from 'supertokens-auth-react/recipe/session';
 import { useHistory } from "react-router-dom";
-import { signOut } from "supertokens-auth-react/recipe/emailpassword";
+import { signOut } from "supertokens-auth-react/recipe/thirdparty";
 
 export default function Home() {
     const userId = Session.getUserId();