Support SAML authentication provider

.env.example

@@ -41,6 +41,10 @@ REACT_APP_CAS_PROVIDER1=
 REACT_APP_CAS_PROVIDER1_NAME=
 REACT_APP_CAS_PROVIDER1_ENDPOINT=
 
+REACT_APP_SAML_PROVIDER1=
+REACT_APP_SAML_PROVIDER1_NAME=
+REACT_APP_SAML_PROVIDER1_ENDPOINT=
+
 REACT_APP_MODULE_BACKEND_URL=https://source-academy.github.io/modules
 REACT_APP_SHAREDB_BACKEND_URL=
 REACT_APP_SICPJS_BACKEND_URL="http://127.0.0.1:8080/"

src/commons/sagas/RequestsSaga.ts

@@ -77,7 +77,8 @@ export const postAuth = async (
       ...(clientId ? { client_id: clientId } : {}),
       ...(redirectUri ? { redirect_uri: redirectUri } : {})
     },
-    errorMessage: 'Could not login. Please contact the module administrator.'
+    errorMessage: 'Could not login. Please contact the module administrator.',
+    withCredentials: true
   });
   if (!resp) {
     return null;

src/commons/utils/AuthHelper.ts

@@ -2,7 +2,8 @@ import Constants from './Constants';
 
 export enum AuthProviderType {
   OAUTH2 = 'OAUTH2',
-  CAS = 'CAS'
+  CAS = 'CAS',
+  SAML_SSO = 'SAML'
 }
 
 export function computeEndpointUrl(providerId: string): string | undefined {
@@ -19,6 +20,9 @@ export function computeEndpointUrl(providerId: string): string | undefined {
       case AuthProviderType.CAS:
         epUrl.searchParams.set('service', computeRedirectUri(providerId)!);
         break;
+      case AuthProviderType.SAML_SSO:
+        epUrl.searchParams.set('target_url', computeRedirectUri(providerId)!);
+        break;
     }
     return epUrl.toString();
   } catch (e) {

src/commons/utils/Constants.ts

@@ -77,6 +77,18 @@ for (let i = 1; ; ++i) {
   authProviders.set(id, { name, endpoint, isDefault: false, type: AuthProviderType.CAS });
 }
 
+for (let i = 1; ; ++i) {
+  const id = process.env[`REACT_APP_SAML_PROVIDER${i}`];
+  if (!id) {
+    break;
+  }
+
+  const name = process.env[`REACT_APP_SAML_PROVIDER${i}_NAME`] || 'Unnamed provider';
+  const endpoint = process.env[`REACT_APP_SAML_PROVIDER${i}_ENDPOINT`] || '';
+
+  authProviders.set(id, { name, endpoint, isDefault: false, type: AuthProviderType.SAML_SSO });
+}
+
 export enum Links {
   githubIssues = 'https://github.com/source-academy/frontend/issues',
   githubOrg = 'https://github.com/source-academy',

src/commons/utils/RequestHelper.tsx

@@ -25,6 +25,7 @@ type RequestOptions = {
   noContentType?: boolean;
   noHeaderAccept?: boolean;
   refreshToken?: string;
+  withCredentials?: boolean;
 };
 
 export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
@@ -140,16 +141,24 @@ export const generateApiCallHeadersAndFetchOptions = (
   if (opts.accessToken) {
     headers.append('Authorization', `Bearer ${opts.accessToken}`);
   }
-  const fetchOpts: { method: RequestMethod; headers: Headers; body?: any } = { method, headers };
+  const fetchOpts: {
+    method: RequestMethod;
+    headers: Headers;
+    body?: any;
+    credentials?: RequestCredentials;
+  } = { method, headers };
   if (opts.body) {
     if (opts.noContentType) {
       // Content Type is not needed for sending multipart data
-      fetchOpts.body = opts.body;
+      fetchOpts.body = opts.body as any;
     } else {
       headers.append('Content-Type', 'application/json');
       fetchOpts.body = JSON.stringify(opts.body);
     }
   }
+  if (opts.withCredentials) {
+    fetchOpts.credentials = 'include';
+  }
 
   return fetchOpts;
 };

src/pages/login/Login.tsx

@@ -14,6 +14,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router';
+import { AuthProviderType } from 'src/commons/utils/AuthHelper';
 import { useSession } from 'src/commons/utils/Hooks';
 
 import { fetchAuth, login } from '../../commons/application/actions/SessionActions';
@@ -40,6 +41,8 @@ const Login: React.FunctionComponent<{}> = () => {
     [dispatch]
   );
 
+  const isSaml = Constants.authProviders.get(providerId)?.type === AuthProviderType.SAML_SSO;
+
   React.useEffect(() => {
     // If already logged in, navigate to relevant course page
     if (isLoggedIn) {
@@ -52,12 +55,13 @@ const Login: React.FunctionComponent<{}> = () => {
     }
 
     // Else fetch JWT tokens and user info from backend when auth provider code is present
-    if (authCode && !isLoggedIn) {
+    // SAML does not require code, as relay is handled in backend
+    if ((authCode || isSaml) && !isLoggedIn) {
       dispatch(fetchAuth(authCode, providerId));
     }
-  }, [authCode, providerId, dispatch, courseId, navigate, isLoggedIn]);
+  }, [authCode, isSaml, providerId, dispatch, courseId, navigate, isLoggedIn]);
 
-  if (authCode) {
+  if (authCode || isSaml) {
     return (
       <div className={classNames('Login', Classes.DARK)}>
         <Card className={classNames('login-card', Classes.ELEVATION_4)}>