From db1f11acb1ab2cc2ec7f8a6049e929a2bed8ee49 Mon Sep 17 00:00:00 2001 From: Kelvin Chappell Date: Fri, 28 Oct 2022 11:30:45 +0100 Subject: [PATCH 1/3] :seedling: Add custom scopes to authorisation request This enables the Okta-hosted login app to request additional custom scopes when authorising. --- okta-hosted-login/README.md | 2 ++ okta-hosted-login/src/config.js | 3 ++- okta-hosted-login/vite.config.js | 9 ++++++++- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/okta-hosted-login/README.md b/okta-hosted-login/README.md index 5069fb01..f177d674 100644 --- a/okta-hosted-login/README.md +++ b/okta-hosted-login/README.md @@ -35,12 +35,14 @@ Now you need to gather the following information from the Okta Developer Console * **Client Id** - The client ID of the SPA application that you created earlier. This can be found on the "General" tab of an application, or the list of applications. This identifies the application that tokens will be minted for. * **Issuer** - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and `/oauth2/default`. For example, `https://dev-1234.oktapreview.com/oauth2/default`. +* **Custom scopes** - Space-separated list of custom access scopes to request in access token. These values must exist as environment variables. They can be exported in the shell, or saved in a file named `testenv`, at the root of this repository. (This is the parent directory, relative to this README) See [dotenv](https://www.npmjs.com/package/dotenv) for more details on this file format. ```ini ISSUER=https://yourOktaDomain.com/oauth2/default CLIENT_ID=123xxxxx123 +CUSTOM_SCOPES=read write ``` > NOTE: If you are running the sample against an org that has [Okta's Identity Engine](https://developer.okta.com/docs/concepts/ie-intro/) enabled, you will need to add the following environment variable to your `testenv` file diff --git a/okta-hosted-login/src/config.js b/okta-hosted-login/src/config.js index 2e8bbb81..d17684cd 100644 --- a/okta-hosted-login/src/config.js +++ b/okta-hosted-login/src/config.js @@ -16,13 +16,14 @@ const OKTA_TESTING_DISABLEHTTPSCHECK = process.env.OKTA_TESTING_DISABLEHTTPSCHEC const BASENAME = import.meta.env.BASE_URL || ''; // BASENAME includes trailing slash const REDIRECT_URI = `${window.location.origin}${BASENAME}login/callback`; +const CUSTOM_SCOPES = process.env.CUSTOM_SCOPES ? process.env.CUSTOM_SCOPES.split(' ') : []; export default { oidc: { clientId: CLIENT_ID, issuer: ISSUER, redirectUri: REDIRECT_URI, - scopes: ['openid', 'profile', 'email'], + scopes: ['openid', 'profile', 'email'].concat(CUSTOM_SCOPES), pkce: true, disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK, }, diff --git a/okta-hosted-login/vite.config.js b/okta-hosted-login/vite.config.js index 30ce7dc7..189137e9 100644 --- a/okta-hosted-login/vite.config.js +++ b/okta-hosted-login/vite.config.js @@ -15,7 +15,7 @@ process.env.USE_INTERACTION_CODE = process.env.USE_INTERACTION_CODE || false; const env = {}; -// List of environment variables made available to the app +// List of required environment variables made available to the app [ 'ISSUER', 'CLIENT_ID', @@ -28,6 +28,13 @@ const env = {}; env[key] = process.env[key]; }); +// List of optional environment variables made available to the app +[ + 'CUSTOM_SCOPES', +].forEach((key) => { + env[key] = process.env[key]; +}); + // https://vitejs.dev/config/ export default defineConfig(( { command } ) => { const includeSampleBaseName = command === 'build' && !process.env.STANDALONE_SAMPLE_BUILD; From 0a84fe625a616ed3c4722102d6a5ddc224feb541 Mon Sep 17 00:00:00 2001 From: Kelvin Chappell Date: Tue, 15 Nov 2022 12:14:28 +0000 Subject: [PATCH 2/3] Use spread operator --- okta-hosted-login/src/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/okta-hosted-login/src/config.js b/okta-hosted-login/src/config.js index d17684cd..21a6960c 100644 --- a/okta-hosted-login/src/config.js +++ b/okta-hosted-login/src/config.js @@ -23,7 +23,7 @@ export default { clientId: CLIENT_ID, issuer: ISSUER, redirectUri: REDIRECT_URI, - scopes: ['openid', 'profile', 'email'].concat(CUSTOM_SCOPES), + scopes: ['openid', 'profile', 'email', ...CUSTOM_SCOPES], pkce: true, disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK, }, From 956ff8b05b7f21b61e76da88039d6bc3c8e56c0a Mon Sep 17 00:00:00 2001 From: Kelvin Chappell Date: Fri, 9 Dec 2022 09:40:43 +0000 Subject: [PATCH 3/3] Correct port number in readme --- okta-hosted-login/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/okta-hosted-login/README.md b/okta-hosted-login/README.md index f177d674..cdac3091 100644 --- a/okta-hosted-login/README.md +++ b/okta-hosted-login/README.md @@ -60,7 +60,7 @@ You could also start the app server from root directory like: npm run okta-hosted-login-server ``` -Now navigate to http://localhost:8080 in your browser. +Now navigate to http://localhost:8081 in your browser. If you see a home page that prompts you to login, then things are working! Clicking the **Log in** button will render a custom login page component that uses the Okta Sign-In Widget to perform authentication.