🌱 Add custom scopes to authorisation request

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
@@ -58,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.
 

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', ...CUSTOM_SCOPES],
     pkce: true,
     disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK,
   },

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;