Update react-oauth and instructions.

pangeacyber · Oct 8, 2024 · 2c16bbb · 2c16bbb
1 parent f0454cb
commit 2c16bbb
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 30 deletions.
diff --git a/.env.template b/.env.template
@@ -1,3 +1,3 @@
 # copy this file to .env.local and remove the values below
 REACT_APP_CLIENT_ID="{CLIENT_ID}"
-REACT_APP_PROJECT_DOMAIN="{PROJECT_DOMAIN}"
+REACT_APP_METADATA_URL="{METADATA_URL}"
diff --git a/README.md b/README.md
@@ -22,9 +22,6 @@ Create a project and enable the AuthN Service in the Pangea Console.
 > - Click `+ Redirect`
 > - Type `http://localhost:3001` in the URL input and click `Save`
 
-Note the following field in the `AuthN > Overview` section.
-- Domain: this is the PANGEA_DOMAIN
-
 Navigate to `AuthN > OAuth Server`.
 - Click the `+ OAuth Client` button on the right.
 - Enter a name for the client.
@@ -33,11 +30,11 @@ Navigate to `AuthN > OAuth Server`.
 - Enter an `Allowed Redirect URL` of `http://localhost:3001`, and press enter.
 - Click Save.
 
+
 > [!IMPORTANT]
 > If the app is running on a different host or port number, the `Allowed Redirect URL` will need to be updated to match your setup.
 
-Copy and note the `Client ID` for the OAuth Client, this is the CLIENT_ID used below.
-Note the domain from the Metadata endpoint under Configuration Details. This will be used as the PROJECT_DOMAIN below.
+Copy and note the `Client ID` for the OAuth Client created above. This is the CLIENT_ID used below. Copy the the `Metadata Endpoint` from the OAuth Server Configuration Details. This is the METADATA_URL used below.
 
 
 ### Configure environment variables
@@ -47,11 +44,7 @@ Note the domain from the Metadata endpoint under Configuration Details. This wil
 
 Set the following values in .env.local
 REACT_APP_CLIENT_ID="{CLIENT_ID}"
-REACT_APP_PROJECT_DOMAIN="{PROJECT_DOMAIN}"
-
-> [!IMPORTANT]
-> The PROJECT_DOMAIN just be only the domain part of the Metadata Endpoint, no protocol or path
-> i.e. `pdn-xxxxxxxxxxxxxx.login.dev.aws.pangea.cloud`
+REACT_APP_METADATA_URL="{METADATA_URL}"
 
 
 ### Start the server

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@pangeacyber/react-oauth": "^0.0.2-beta",
+    "@pangeacyber/react-oauth": "^0.0.3-beta",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,28 +1,28 @@
 import { useNavigate } from "react-router-dom";
-import { AuthProvider, AppState } from "@pangeacyber/react-oauth";
+import { AuthProvider, AppState, ClientConfig } from "@pangeacyber/react-oauth";
 
 import Router from "@src/components/Router";
 import './scss/styles.scss';
 
 const CLIENT_ID = process.env.REACT_APP_CLIENT_ID || "";
-const PROJECT_DOMAIN = process.env.REACT_APP_PROJECT_DOMAIN || "";
+const METADATA_URL = process.env.REACT_APP_METADATA_URL || "";
 
 const App = () => {
   const navigate = useNavigate();
 
   const handleLogin = (appData: AppState) => {
-    console.log('handle login', appData.returnPath)
     navigate(appData.returnPath);
   };
 
-  const authConfig = {
+  const authConfig: ClientConfig = {
     clientId: CLIENT_ID,
-    domain: PROJECT_DOMAIN,
-    redirectUri: "http://localhost:3001",
+    metadataUrl: METADATA_URL,
+    callbackUri: "http://localhost:3001",
     onLogin: handleLogin,
+    loadMetadata: true,
   };
 
-  if (!authConfig.clientId || !authConfig.domain) {
+  if (!authConfig.clientId || !authConfig.metadataUrl) {
     return (
       <html lang="en">
         <head />
@@ -41,7 +41,7 @@ const App = () => {
       config={authConfig}
       cookieOptions={{
         useCookie: true,
-        cookieName: "pangea-sample"
+        tokenCookieName: "pangea-sample",        
       }}
     >
       <Router />

diff --git a/yarn.lock b/yarn.lock
@@ -2356,12 +2356,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pangeacyber/oauth-js@npm:^0.0.1-beta":
-  version: 0.0.1-beta
-  resolution: "@pangeacyber/oauth-js@npm:0.0.1-beta"
+"@pangeacyber/oauth-js@npm:0.0.3-beta":
+  version: 0.0.3-beta
+  resolution: "@pangeacyber/oauth-js@npm:0.0.3-beta"
   dependencies:
     jose: "npm:^5.9.3"
-  checksum: 10c0/d89203ea2f5d5d030e2b3cca7ea7336a95859e72a2f249ec4df60fbedddf6f5aa04296425aca692fdbfb3829073ec9b42c2ed6e6faae2969cfb0e2ef4fb6c5e5
+  checksum: 10c0/2ae667b5539491f5217399b607c7ee179d0cbd80e164d52e8914bc1a3b3464216bf9d58c55e379d949c89d96a09369cc6915a62d0cb454f091bb19034bb31d1b
   languageName: node
   linkType: hard
 
@@ -2372,7 +2372,7 @@ __metadata:
     "@babel/core": "npm:^7.25.2"
     "@babel/plugin-proposal-private-property-in-object": "npm:^7.21.11"
     "@craco/craco": "npm:^7.1.0"
-    "@pangeacyber/react-oauth": "npm:^0.0.2-beta"
+    "@pangeacyber/react-oauth": "npm:^0.0.3-beta"
     "@testing-library/jest-dom": "npm:^5.17.0"
     "@testing-library/react": "npm:^13.4.0"
     "@testing-library/user-event": "npm:^13.5.0"
@@ -2393,14 +2393,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@pangeacyber/react-oauth@npm:^0.0.2-beta":
-  version: 0.0.2-beta
-  resolution: "@pangeacyber/react-oauth@npm:0.0.2-beta"
+"@pangeacyber/react-oauth@npm:^0.0.3-beta":
+  version: 0.0.3-beta
+  resolution: "@pangeacyber/react-oauth@npm:0.0.3-beta"
   dependencies:
-    "@pangeacyber/oauth-js": "npm:^0.0.1-beta"
+    "@pangeacyber/oauth-js": "npm:0.0.3-beta"
   peerDependencies:
     react: ">=17"
-  checksum: 10c0/9062d99e64a6afe61b537c4eae860b21e746254feb876d6072f2e1fb9ed87ff55b8d3d1412160e6bdd8f6dd57c005739fc59de9e08fe31010461fba8904e7d1a
+  checksum: 10c0/b1fc8eb52d5f38152a223bf34ac99a9ebba0eade2c4a20adeb4f321b7e62ddd2c6c78ff68ff197f1d2760e81995902ed0bbd4960d80967ba1b4f17e43744c23b
   languageName: node
   linkType: hard