Merge pull request #4 from descope-sample-apps/sso

SSO via OIDC (Tenant)

Author: allenzhou101

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "java.configuration.updateBuildConfiguration": "interactive"
+}

README.md

@@ -1,6 +1,6 @@
-# Java React Sample App 
+# Java React Sample App
 
-This sample app showcases Descope authentication built using React for frontend and Java Spring for backend. The frontend incldues a home, login, and dashboard screen, with the dashboard including a call to the backend to get a "secret message" that is only shared when a valid session token is passed in. 
+This sample app showcases Descope authentication built using React for frontend and Java Spring for backend. The frontend incldues a home, login, and dashboard screen, with the dashboard including a call to the backend to get a "secret message" that is only shared when a valid session token is passed in.
 
 Authentication and session validation are implemented using Descope's [React SDK](https://github.com/descope/react-sdk) and [Java SDK](https://github.com/descope/descope-java) in the frontend and backend respectively.
 
@@ -9,11 +9,13 @@ Authentication and session validation are implemented using Descope's [React SDK
 ### Run server
 
 1. Navigate into the server folder:
+
 ```
 cd server
 ```
 
 2. In your `application.properties` file, add your Descope project ID:
+
 ```
 descope.project.id=<YOUR_DESCOPE_PROJECT_ID>
 ```
@@ -30,34 +32,65 @@ If you use Maven, run the following command in a terminal window (in the complet
 ./mvnw spring-boot:run
 ```
 
-
 ### Run client
 
 1. Navigate into the client folder:
+
 ```
 cd client
 ```
 
 2. Install dependencies
+
 ```
 npm i
 ```
 
 3. Create a `.env` folder and add environment variables:
+
 ```
 REACT_APP_DESCOPE_PROJECT_ID="YOUR_DESCOPE_PROJECT_ID"
 ```
 
 4. Start the application
+
 ```
 npm start
 ```
 
->Note: If you're not running the client at http://localhost:3000 you may need to change the server's CrossOrigin domain to wherever you're hosting it (in JavaSampleAppApplication.java).
+>Note: If you're not running the client at <http://localhost:3000> you may need to change the server's CrossOrigin domain to wherever you're hosting it (in JavaSampleAppApplication.java).
+
 ```
 @CrossOrigin(origins = "http://localhost:3000")
 ```
 
+## Tenant-based OIDC SSO Setup
+
+You will need to configure a tenant in your Descope console with OIDC. Then, you can use the associated tenant ID to start SSO, redirect to the IdP authentication portal, and then exchange the returned code for 
+authenticated user info. We'll include the steps to set up in the UI here, but this can also be done via API or SDK.
+
+1. Create a tenant [here](https://app.descope.com/tenants)
+2. Then, click on the tenant, Authentication Methods, SSO and enable and configure SSO via OIDC with an Identity Provider
+
+Be sure to have `https://api.descope.com/v1/oauth/callback` in the allowed redirect URIs
+
+![Screenshot 2024-02-17 at 10 42 35 AM](https://github.com/descope-sample-apps/java-react-sample-app/assets/46854522/76cf59da-5e8e-4067-b601-23445b05bf77)
+
+3. Run your application per `Setup & Running` as described above, with the client at http://localhost:3000 and server at http://localhost:8080.
+
+4. Navigate to the url where your client is running and input the tenant ID.
+
+![Screenshot 2024-02-17 at 10 38 23 AM](https://github.com/descope-sample-apps/java-react-sample-app/assets/46854522/a7647954-c166-447a-b848-0171364210a2)
+
+5. Log in via your IdP. Then, you'll be redirected back to the application where the SSO exchange will complete.
+
+![Screenshot 2024-02-17 at 10 46 38 AM](https://github.com/descope-sample-apps/java-react-sample-app/assets/46854522/0159a703-20a3-4a2e-b25c-120c043f66a2)
+
+You should see the signed in user's email, userId, session, and refresh token.
+![Screenshot 2024-02-18 at 10 22 19 AM](https://github.com/descope-sample-apps/java-react-sample-app/assets/46854522/3feb9585-d508-4d8b-ac13-e1cd54307c3f)
+
+
+
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

client/src/components/AuthorizationCodeCallback.js

@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const AuthorizationCodeCallback = () => {
+    const [response, setResponse] = useState(null);
+    const [error, setError] = useState("");
+    const hasFetchedRef = useRef(false);
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const code = urlParams.get('code');
+
+      // Ref added to prevent calling of endpoint twice,
+      // due to React Strict Mode behavior in development
+      // for debugging purposes
+      if (hasFetchedRef.current) {
+        return;
+      }
+      hasFetchedRef.current = true;
+      
+      if (code) {
+
+        fetch(`http://localhost:8080/authorization-code/callback`, {
+            method: 'POST',
+            headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+            },
+            body: JSON.stringify({ code }),
+        })
+        .then(async response => {
+            const data = await response.json();
+            setResponse(data);
+            // Navigate to protected page
+            // navigate('/protected', { replace: true });
+        })
+        .catch(error => {
+          console.error('Error:', error);
+          setError(error);
+        });
+      }
+    }, []);
+
+
+
+    if (error) {
+        return ( <p>{error.toString()}</p>);
+    }
+
+    if (response) {
+        return (
+            <div>
+                <p>{response.email}</p>
+                <p>{response.userId}</p>
+                <p>{response.token}</p>
+                <p>{response.refreshToken}</p>
+            </div>
+        );
+    }
+  
+    return (
+      <div>Loading...</div>
+    );
+}
+
+export default AuthorizationCodeCallback;

client/src/components/SSOSignIn.js

@@ -0,0 +1,37 @@
+import { useState } from "react";
+
+const SSOSignIn = () => {
+
+    const [tenantId, setTenantId] = useState("");
+    const startSSOSignIn = () => {
+        if (!tenantId) {
+            alert("Please enter a tenant ID");
+            return;
+        } else {
+            const queryParams = new URLSearchParams({
+                tenantId,
+                redirectUrl: 'http://localhost:3000/authorization-code/callback',
+            }).toString();
+            fetch(`http://localhost:8080/start_sso?${queryParams}`, {
+                headers: {
+                    Accept: 'application/json',
+                }
+            }).then(async (response) => {
+                const url = (await response.json()).url;
+                console.log(url)
+                window.location.href = url;
+            }).catch((error) => {
+                console.log(error)
+                alert("Error starting SSO sign in.")
+            });
+        }
+    }
+
+    return <>
+        <h1>Tenant SSO OIDC Sign In</h1>
+        <input type="text" value={tenantId} placeholder="Tenant ID" onChange={(e) => setTenantId(e.target.value)} />
+        <button onClick={startSSOSignIn}>Sign in via SSO</button>
+    </>
+}
+
+export default SSOSignIn;

client/src/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
 import { AuthProvider } from '@descope/react-sdk';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Layout from "./pages/Layout";
 import Home from "./pages/Home";
 import Dashboard from "./pages/Dashboard";
 import SignIn from "./pages/SignIn";
+import AuthorizationCodeCallback from './components/AuthorizationCodeCallback';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -18,6 +18,7 @@ root.render(
                 <Routes>
                     <Route path="/" element={<Layout />}>
                     <Route index element={<Home />} />
+                    <Route path="/authorization-code/callback" element={<AuthorizationCodeCallback />} />
                     <Route path="/dashboard" element={<Dashboard />} />
                     <Route path="/signin" element={<SignIn />} />
                     </Route>

client/src/pages/Home.js

@@ -4,6 +4,7 @@ import { useDescope, useSession, useUser } from '@descope/react-sdk'
 import { Descope } from '@descope/react-sdk'
 import { getSessionToken } from '@descope/react-sdk';
 import SecretMessage from '../components/SecretMessage';
+import SSOSignIn from '../components/SSOSignIn';
 
 
 const Home = () => {
@@ -25,6 +26,8 @@ const Home = () => {
       <h1>Welcome to your home page</h1>
       <button onClick={() => window.location.href = '/signin'}>Sign In</button>
       <SecretMessage/>
+      <SSOSignIn/>
+
     </div>
   </>;
 }

server/pom.xml

@@ -31,7 +31,7 @@
 		<dependency>
 			<artifactId>java-sdk</artifactId>
 			<groupId>com.descope</groupId>
-			<version>1.0</version>
+			<version>1.0.14</version>
 		</dependency>
 
 	</dependencies>

server/src/main/java/com/descope/java_sample_app/JavaSampleAppApplication.java

@@ -1,31 +1,51 @@
 package com.descope.java_sample_app;
+
 import com.descope.client.*;
 import com.descope.exception.DescopeException;
+import com.descope.model.auth.AuthenticationInfo;
 import com.descope.model.jwt.Token;
+import com.descope.model.magiclink.LoginOptions;
 import com.descope.sdk.auth.*;
+
+import jakarta.annotation.PostConstruct;
 import jakarta.servlet.http.HttpServletRequest;
+
+import java.util.HashMap;
+import java.util.Map;
+
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
 @SpringBootApplication
 @RestController
 @CrossOrigin(origins = "http://localhost:3000")
 public class JavaSampleAppApplication {
 
+
+	@Value("${descope.project.id}")
+	private String descopeProjectId;
+
+	private DescopeClient descopeClient;
+
 	public static void main(String[] args) {
 		SpringApplication.run(JavaSampleAppApplication.class, args);
 	}
-	@Value("${descope.project.id}")
-	private String descopeProjectId;
+
+ 	@PostConstruct
+    public void init() {
+        descopeClient = new DescopeClient(Config.builder().projectId(descopeProjectId).build());
+    }
 
 	public void validateSession(String sessionToken) throws DescopeException {
-		var descopeClient = new DescopeClient(Config.builder().projectId(descopeProjectId).build());
 		AuthenticationService as = descopeClient.getAuthenticationServices().getAuthService();
 		Token t = as.validateSessionWithToken(sessionToken);
 	}
@@ -60,4 +80,46 @@ public ResponseEntity<String> getSecretMessage(HttpServletRequest request) {
 			return new ResponseEntity<>("Error getting authorization header", HttpStatus.UNAUTHORIZED);
 		}
 	}
-}
+
+	@GetMapping("/start_sso")
+	public ResponseEntity<String> startSSOEndpoint(
+			@RequestParam("tenantId") String tenantId, 
+			@RequestParam(value = "redirectUrl", required = false) String redirectUrl, 
+			@RequestParam(value = "prompt", required = false) String prompt,
+			@RequestParam(value = "loginOptions", required = false) LoginOptions loginOptions) {
+		try {
+			String url = descopeClient.getAuthenticationServices().getSsoServiceProvider().start(tenantId, redirectUrl, prompt,
+			loginOptions);
+			String jsonResponse = "{\"url\": \"" + url + "\"}";
+
+			return ResponseEntity.ok()
+					.contentType(org.springframework.http.MediaType.APPLICATION_JSON)
+					.body(jsonResponse);
+		} catch (DescopeException e) {
+			return new ResponseEntity<>(e.getMessage(), HttpStatus.INTERNAL_SERVER_ERROR);
+		}
+	}
+
+	@PostMapping("/authorization-code/callback")
+	public ResponseEntity<?> handleAuthorizationCode(@RequestBody Map<String, String> payload) {
+		try {
+			String code = payload.get("code");
+			AuthenticationInfo authInfo = descopeClient.getAuthenticationServices().getSsoServiceProvider().exchangeToken(code);
+			String email = authInfo.getUser().getEmail();
+			String userId = authInfo.getUser().getUserId();
+			String token = authInfo.getToken().toString();
+			String refreshToken = authInfo.getRefreshToken().toString();
+			
+			Map<String, String> response = new HashMap<>();
+			response.put("email", email);
+			response.put("userId", userId);
+			response.put("token", token);
+			response.put("refreshToken", refreshToken);
+			System.out.println("Response: " + response.toString());
+			return ResponseEntity.ok(response);
+		} catch (DescopeException e) {
+			System.out.println("Error: " + e.getMessage());
+			return new ResponseEntity<>(e.getMessage(), HttpStatus.INTERNAL_SERVER_ERROR);
+		}
+	}
+}

server/src/main/resources/application.properties

@@ -1 +1 @@
-descope.project.id=<your_project_id>
+descope.project.id=<your descope project id>