How to build and run JavaScript example

[seankang-geoblue]

Hi,
I am rather new to okta as a developer.
I just figured out how to get the flutter web to integrate with the okta JavaScript login.
Now, I am trying to figure out two important things.

1. The instructions for handling the Javascript Web embedded self-service user registration says to create a okta app with type “web”. The working version for my flutter login requires SPA type. I am wondering if these are cross compatible.
   2.) I am trying fo better understand how to build the self-service user registration by looking at the sample source code okta-auth-js/samples/generated/express-embedded-auth-with-sdk at master · okta/okta-auth-js · GitHub. However, I cannot get it to build or run correctly.
   From the instructions in the sample README.md, I should start the sample fro the specific sample directory. And I need to run it like:

yarn workspace {generatedSamplePkgName} start

When I do that, I get this error:

(base) seankang@Sean-Kang express-embedded-auth-with-sdk % yarn workspace @okta/samples.express-embedded-auth-with-sdk start
yarn workspace v1.22.22
yarn run v1.22.22
$ node ./web-server/server.js
node:internal/modules/cjs/loader:598
throw e;
^

Error: Cannot find module ‘/Users/seankang/git/javascript/okta/okta-auth-js/node_modules/@okta/okta-auth-js/build/cjs/exports/default.js’
at createEsmNotFoundErr (node:internal/modules/cjs/loader:1181:15)
at finalizeEsmResolution (node:internal/modules/cjs/loader:1169:15)
at resolveExports (node:internal/modules/cjs/loader:591:14)
at Module._findPath (node:internal/modules/cjs/loader:668:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
at Module._load (node:internal/modules/cjs/loader:985:27)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at Object. (/Users/seankang/git/javascript/okta/okta-auth-js/samples/generated/express-embedded-auth-with-sdk/web-server/utils/getAuthClient.js:14:18)
at Module._compile (node:internal/modules/cjs/loader:1376:14) {
code: ‘MODULE_NOT_FOUND’,
path: ‘/Users/seankang/git/javascript/okta/okta-auth-js/node_modules/@okta/okta-auth-js/package.json’
}

Node.js v20.10.0
error Command failed with exit code 1.
info Visit yarn run | Yarn for documentation about this command.
error Command failed.
Exit code: 1
Command: /usr/local/bin/node
Arguments: /opt/homebrew/Cellar/yarn/1.22.22/libexec/lib/cli.js start
Directory: /Users/seankang/git/javascript/okta/okta-auth-js/samples/generated/express-embedded-auth-with-sdk
Output:

info Visit yarn workspace | Yarn for documentation about this command.

When I look for the specific file being searched, it does not exists.
okta-auth-js/build/cjs/exports/default.js

I tried to install the specific component at the sample directory level, using this command:

yarn add @okta/okta-auth-js -W

(Adding the -W because there was specific warning or error before – without using that)
But when I run this command, it results in another error.

$ rollup -c
Error loading tslib helper library.
[!] Error: Package subpath ‘./package.json’ is not defined by “exports” in /Users/seankang/git/javascript/okta/okta-auth-js/node_modules/rollup-plugin-typescript2/node_modules/tslib/package.json
Error: Package subpath ‘./package.json’ is not defined by “exports” in /Users/seankang/git/javascript/okta/okta-auth-js/node_modules/rollup-plugin-typescript2/node_modules/tslib/package.json
at exportsNotFound (node:internal/modules/esm/resolve:294:10)
at packageExportsResolve (node:internal/modules/esm/resolve:641:9)
at resolveExports (node:internal/modules/cjs/loader:591:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:668:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
at Function.Module._load (node:internal/modules/cjs/loader:985:27)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at Object. (/Users/seankang/git/javascript/okta/okta-auth-js/node_modules/rollup-plugin-typescript2/src/tslib.ts:11:23)
at Module._compile (node:internal/modules/cjs/loader:1376:14)

error Command failed with exit code 1.

This is my specific environment:

mac osx arm 13.6.6
node version v20.10.0
yarn version 1.22.22

I havent modified the samples (yet)

[seankang-geoblue]

OK. I figured out how to get the [okta-auth-js/samples/generated/express-embedded-auth-with-sdk to run inside a docker ubuntu container.
However, this sample requires a web okta application to be configured since the demo app uses clientSecret versus the PKCE SPA approach. My current approach using okta web login requires SPA/PKCE since the app needs the refresh token and offline mode (Not sure if that is a real reason). But when I try to change my app from SPA to web, my app cannot fetch the tokens using the code challenge-and-verifier. Since the demo app shows how to use self-service user-registration in a WEB okta app, this demo app needs to be changed to use SPA with PKCE, or my current app needs to change to use web without the PKCE.

Please provide some directions.

[nicole]

I responded to your case on this but I wanted to add the same details here in case anyone else runs into this with this sample:

In Okta Admin UI:

To start, make sure your app has interaction code enabled as a grant type, and PKCE is also enabled on the client.

Note --i f you have not enabled Embedded Sign-in Widget Support under Settings > Account make sure to do that, as well as on the Authorization Server Access Policy if you are using a custom auth server and not the org auth server (if your issuer contains the word “default” you are using the default custom auth server, not the org auth server).

Then, in your code:

You can use testenv as the readme discusses to add your issuer and client id, you won’t need a client secret param. Then go into your the folder Web Server > Utils > getAuthClient.js and modify the client config to include (see pic below):

• responseType: ‘code’
• pkce: true

You can run it by navigating to the root of the sample samples/generated/express-embedded-auth-with-sdk and using npm/yarn start

[seankang-geoblue]

Hello.

I have some urgent follow up questions.

I am able to obtain the ID, Access and refresh token using the authorize and then the token JavaScripts API from flutter.

1.) What is the official code to use to generate the code challenge and code verifier in flutter?
I am putting my code at the bottom of this message.

2.) I tried to generate a new set of ID and access token using the refresh token – using postman – after the app had obtained the first set of ID, access and refresh.

I am using this approach documented on this page.

Refresh access tokens | Okta Developer

I am using this direct HTTP approach from inside my flutter app.

Note this:
I am using this endpoint.
https://geo-bluesandbox.oktapreview.com/oauth2/default/v1/token

I also passing the clientID which is not mentioned in the documentation. I tried with and without, but I get the same error.

[andrea]

Can you try correcting the “grant_type” value to refresh_token instead of refresh_code and see if that works?

[seankang-geoblue]

Yes, that works – that was my mistake.