Auth JS 6.4.0 causes issues in Angular apps when testing #1174

mraible · 2022-04-11T20:33:30Z

Describe the bug?

Today I discovered that if you upgrade an Angular app from using Auth JS 6.2.0 from 6.4.0, there are stack traces when you run npm test:

ERROR: 'Unhandled Promise rejection:', 'Failed to execute 'postMessage' on 'BroadcastChannel': Channel is closed', '; Zone:', '<root>', '; Task:', 'Promise.then', '; Value:', DOMException{stack: 'Error: Failed to execute 'postMessage' on 'BroadcastChannel': Channel is closed
    at Object.postMessage (http://localhost:9876/_karma_webpack_/webpack:/node_modules/broadcast-channel/dist/esbrowser/methods/native.js:26:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/broadcast-channel/dist/esbrowser/broadcast-channel.js:198:1
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:372:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:287:1)
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:371:1)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:134:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:1275:1
    at _ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:406:1)
    at ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:318:1)
    at _ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:405:1)'}, 'Error: Failed to execute 'postMessage' on 'BroadcastChannel': Channel is closed
    at Object.postMessage (http://localhost:9876/_karma_webpack_/webpack:/node_modules/broadcast-channel/dist/esbrowser/methods/native.js:26:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/broadcast-channel/dist/esbrowser/broadcast-channel.js:198:1
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:372:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:287:1)
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:371:1)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:134:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:1275:1
    at _ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:406:1)
    at ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:318:1)
    at _ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:405:1)'

If I revert to Auth JS 6.2.0, the problem goes away.

What is expected to happen?

What is the actual behavior?

Reproduction Steps?

git clone https://github.com/okta-samples/okta-angular-sample.git
cd okta-angular-sample
npm i && npm test

There's no stack trace because v6.2.0 is used. Update package.json to use "@okta/okta-auth-js": "^6.4.0" and try again.

npm i
npm test

You'll see the stack trace, even though tests pass.

SDK Versions

Everything works great with:

"@okta/okta-angular": "^5.1.1",
"@okta/okta-auth-js": "^6.2.0",

Execution Environment

$ node --version
v16.14.0

macOS Monterey

Additional Information?

No response

The text was updated successfully, but these errors were encountered:

mraible · 2022-04-11T21:23:45Z

This seems to happen on the Vue sample as well. However, it’s in the browser console for Vue, and downgrading to Auth JS 6.2.0 doesn’t make it go away.

Steps to reproduce:

Install the Okta CLI and configure it with your org.
Run okta start vue and follow the printed instructions.
Run npm start and you'll see the errors in your browser console.

mraible · 2022-04-11T21:28:32Z

This doesn't just happen in Chrome. It happens in Firefox and Safari too.

jaredperreault-okta · 2022-04-11T21:51:35Z

@mraible Do you know what version of broadcast-channel is being used in your builds?

yarn why broadcast-channel should do the trick

mraible · 2022-04-11T21:53:51Z

@jaredperreault-okta I'm not using yarn, I'm using npm. I'm not sure if npm list is the same, but I tried npm list broadcast-channel in the Angular sample:

$ npm list broadcast-channel
[email protected] /Users/mraible/dev/okta-samples/okta-angular-sample
└─┬ @okta/[email protected]
  └── [email protected]

If I try it in the Vue sample, it's a similar result:

[email protected] /Users/mraible/dev/okta-samples/okta-vue-sample
└─┬ @okta/[email protected]
  └── [email protected]

saosebastiao · 2022-04-14T17:15:15Z

This is happening in Okta-React as well. Is there a workaround?

jaredperreault-okta · 2022-04-15T02:41:22Z

@saosebastiao are you able to reproduce this with the Okta React Sample?

What version of @okta/okta-auth-js and @okta/okta-react are you using?

shuowu · 2022-04-18T15:48:30Z

Fixed in 6.4.1

mraible · 2022-04-18T16:02:24Z

I just tried validating everything is fixed using the okta-angular-sample. If I upgrade it to use Auth JS 6.4.2, the problem does go away.

However, if I upgrade the okta-vue-sample to 6.4.2, there are still errors in my browser's console.

mraible · 2022-04-18T20:22:52Z

I see something similar in the Okta CLI's React sample:

FAIL src/App.test.jsx
  ✕ renders title link (250 ms)

  ● renders title link

    No useable method found in ["native","idb","localstorage"]

      at node_modules/@okta/okta-auth-js/dist/webpack:/OktaAuth/node_modules/broadcast-channel/dist/esbrowser/method-chooser.js:42:25
      at new he (node_modules/@okta/okta-auth-js/dist/webpack:/OktaAuth/node_modules/broadcast-channel/dist/esbrowser/broadcast-channel.js:22:17)
      at e.startElector (node_modules/@okta/okta-auth-js/dist/webpack:/OktaAuth/lib/ServiceManager.ts:136:24)
      at e.start (node_modules/@okta/okta-auth-js/dist/webpack:/OktaAuth/lib/ServiceManager.ts:100:12)
      at e.value (node_modules/@okta/okta-auth-js/dist/webpack:/OktaAuth/lib/OktaAuth.ts:366:25)
      at node_modules/@okta/src/Security.tsx:83:4

By "similar", I mean broadcast-channel is in the stack trace. I tried upgrading to Auth JS 6.4.3, but it does not solve this issue.

StephenAtCFA · 2022-04-18T20:44:45Z

We're also seeing this in 6.4.3 when using react.

jaredperreault-okta · 2022-04-18T21:04:53Z

@StephenAtCFA can you provide more details?

You're seeing this error in your application itself, or in testing (jest or otherwise)?

What versions of the other relevant modules are you using, ie React, okta-react?

Do you see this same behavior in different versions of okta-auth-js?

mrcotter · 2022-04-19T01:17:45Z

Seeing the same error messages in the latest 6.4.3 version with my Vue 3 application using okta-auth-js and okta-signin-widget.

Downgrade okta-auth-js and lock its version to 6.2.0 works but any other new versions have similar problem.

jaredperreault-okta · 2022-04-19T16:22:46Z

@mrcotter What browser/OS are you testing this on? I am currently unable to repro this issue (using okta-auth-js 6.4.3)

StephenAtCFA · 2022-04-19T21:24:21Z

On brave v 1.36.122 / mac os 12.3 / node 16.14.0 / react 17.0.2 / webpack 5.70.0 / @babel/core 7.17.8 / okta-react 6.4.3 / okta-auth-js 6.4.3

StephenAtCFA · 2022-04-19T21:24:40Z

Using redirect not okta widget

mrcotter · 2022-04-20T00:04:33Z

@mrcotter What browser/OS are you testing this on? I am currently unable to repro this issue (using okta-auth-js 6.4.3)

On latest versions of Chrome (100.0.4896.88) and Firefox (99.0.1) on macOS (12.3.1)

An example from the browser console:

mraible · 2022-05-02T18:15:41Z

I tried upgrading the Okta CLI's Vue sample to [email protected] today and there are still errors in my console.

.

pzi · 2022-05-04T06:48:07Z

After login and when navigating a next.js app with okta-auth-js v6.5.0 and okta-react v6.4.3

richmason · 2022-05-26T11:13:09Z

I'm seeing this issue in my Vue 3 project which is using @okta/okta-auth-js v6.5.1 and @okta/okta-vue v5.2.1:

TD-DO · 2022-06-09T20:09:32Z

I am seeing this in my React project:
"@okta/okta-auth-js": "^6.6.1",
"@okta/okta-react": "^6.4.3",
"@okta/okta-signin-widget": "^6.4.0",
react: 18.1.0
Is there an ETA on when this may be fixed?
Also, downgrading to 6.2.0 doesn't fix this for me
I'm seeing it in my console and it's breaking my cypress tests but not anywhere else

TD-DO · 2022-06-10T17:03:10Z

Downgrading to 6.1.0 works

jaredperreault-okta · 2022-06-10T21:01:25Z

okta-react 6.5.0 and okta-vue 5.3.0 were released this morning and address this issue

cc @pzi @richmason @TD-DO

KLCarrierDirect · 2022-07-06T15:30:36Z

Upgrading okta-react to 6.5.0 causes the error in my React project: Can't perform a React state update on an unmounted component for working code. Downgrading to 6.1.0 and 6.2.0 do not work as we are using react-router-dom v6.2.1. Our goal in upgrading to 6.5.0 is to remove the Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'BroadcastChannel': Channel is closed errors.

Originally using the following:
"@okta/okta-auth-js": "^6.6.0",
"@okta/okta-react": "^6.4.3",
"@okta/okta-signin-widget": "^6.1.0"

jaredperreault-okta · 2022-07-06T15:36:06Z

@KLCarrierDirect can you provide a snippet or an example repo which illustrates this error?

KLCarrierDirect · 2022-07-06T18:45:43Z

@jaredperreault-okta

Here are the Broadcast errors using @okta/okta-react v6.4.3

Here is the mounting error when upgrading to @okta/okta-react v6.5.0

jaredperreault-okta · 2022-07-06T19:15:42Z

Thank you for the stack traces, but can you provide a code snippet as well? Perhaps from your ReportCards component (since it's mentioned in the stack trace). At this time I cannot reproduce this issue

pzi · 2022-07-19T07:49:32Z

@jaredperreault-okta

okta-react 6.5.0 and okta-vue 5.3.0 were released this morning and address this issue

cc @pzi @richmason @TD-DO

Preliminary testing with our Next.js app seems to agree :) Thanks for getting this fixed. Now we just need to get the M1 issue addressed, so everyone can build the app.

KLCarrierDirect · 2022-07-28T17:55:49Z

@jaredperreault-okta

Thank you for the stack traces, but can you provide a code snippet as well? Perhaps from your ReportCards component (since it's mentioned in the stack trace). At this time I cannot reproduce this issue

import Card from "@mui/material/Card"
import Grid from "@mui/material/Grid"
import Typography from "@mui/material/Typography"
import { makeStyles } from "@mui/styles"
import { useOktaAuth } from "@okta/okta-react"
import { getAdminDashReportsByReportType } from "../../adapters/moesif"

const useStyles = makeStyles((theme) => ({
    card: {
        width: "100%",
        height: 675,
        padding: "20px 20px 20px 20px",
    },
}))
const ReportsCard = ({ theme, reportType, index }) => {
    const classes = useStyles()
    const { authState } = useOktaAuth()
    const [isLoaded, setIsLoaded] = useState(false)
    const [report, setReport] = useState()```

    const token = authState?.accessToken?.accessToken

    const hideSpinner = () => setIsLoaded(true)

    useEffect(() => {
        let fetchReport

        try {
            fetchReport = async () => {
                const result = await getAdminDashReportsByReportType(
                    token,
                    reportType
                )
                setReport(result.data.reports[0])
                setIsLoaded(true)
            }

            fetchReport()
        } catch (err) {
            console.error(err)
            fetchReport = async () => {
                const result = await getAdminDashReportsByReportType(
                    token,
                    reportType
                )
                setReport(result.data.reports[0])
                setIsLoaded(true)
            }

            fetchReport()
        }
    }, [])

    return (
        <Grid item container xs={6} key={index}>
            <Card
                elevation={6}
                className={classes.card}
                // sx={{
                //     border: 1,
                //     borderColor: theme.palette.primary.dark,
                // }}
            >
                {!isLoaded ? (
                    <Grid item container zIndex={9999} justifyContent="center">
                        <Grid
                            item
                            container
                            mt="11%"
                            position="absolute"
                            justifyContent="center"
                            direction="column"
                        >
                            <Grid item justifyContent="center">
                                <Typography
                                    textAlign="center"
                                    color="#272f33"
                                    fontSize="24px"
                                >
                                    Loading. . .
                                </Typography>
                            </Grid>
                        </Grid>
                    </Grid>
                ) : null}
                {isLoaded ? (
                    <iframe
                        id={reportType}
                        src={`${report.url}&primary_color=%23396a6a&color_array=%23E37A41%2C%23396a6a%2C%23302E2C%2C%23777B83%2C%23A8A8A9&chart_font_color=%23396a6a`}
                        name={reportType}
                        frameBorder="0"
                        noresize="noresize"
                        width="100%"
                        height="100%"
                        // scrolling="no"
                        onLoad={() => hideSpinner()}
                    />
                ) : null}
            </Card>
        </Grid>
    )
}

export default ReportsCard`

---

Please let me know if this helps or if you need another code snippet. I am having difficulty replicating this issue on js fiddle.

jaredperreault-okta · 2022-07-28T18:13:27Z

@KLCarrierDirect

Can you try upgrading auth-js to 6.7? 6.7 includes a fix for the channel is closed error (CHANGELOG)

I also recommend fetching tokens directly from the tokenManager rather than authState. Recently we have observed an issue with tokens on authState, we believe due to the async nature of token refresh (authState updates are slightly delayed) and we plan to remove tokens from the authState in the next major version

const ReportsCard = ({ theme, reportType, index }) => {
    const classes = useStyles()
    const { oktaAuth } = useOktaAuth()
    const [isLoaded, setIsLoaded] = useState(false)
    const [report, setReport] = useState()

    const hideSpinner = () => setIsLoaded(true)

    useEffect(() => {
        let fetchReport

        try {
            fetchReport = async () => {
                const token = await oktaAuth.tokenManager.get('accessToken');
                const result = await getAdminDashReportsByReportType(
                    token,
                    reportType
                )
                setReport(result.data.reports[0])
                setIsLoaded(true)
            }

KLCarrierDirect · 2022-07-29T19:39:53Z

@jaredperreault-okta

Thank you so much, upgrading to @okta/okta-auth-js 6.7.0 successfully removed the Broadcast channel errors from the console.
I will apply your recommendation to use the tokenManager as we did notice issues with our tokens when upgrading @okta/okta-react.

jaredperreault-okta · 2022-07-29T21:20:25Z

Closing this issue since the original report of the channel is closed error has been fixed in auth-js 6.7

A few other discussions have spawned on this thread, please open tickets if you need additional assistance

Okta-react 사용중 console에 BroadCastChannel 에러가 계속 떠서, okta-auth-js를 6.7.0으로 업데이트 하면서 오류 해결함. 참고 okta/okta-auth-js#1174

mraible added the bug label Apr 11, 2022

shuowu closed this as completed Apr 18, 2022

shuowu reopened this Apr 18, 2022

shuowu mentioned this issue Apr 21, 2022

Uncaught exception thrown when redirect happens after okta sign in #1194

Closed

mraible mentioned this issue Apr 21, 2022

Uncaught exception thrown when redirect happens after okta sign in okta-samples/okta-vue-sample#245

Closed

denysoblohin-okta mentioned this issue May 4, 2022

Implement SyncStorageService using broadcast-channel #1197

Closed

denysoblohin-okta mentioned this issue May 19, 2022

"Failed to execute 'postMessage' on 'BroadcastChannel'" error - React 18 okta/okta-react#232

Closed

jaredperreault-okta closed this as completed Jul 29, 2022

Jimoou mentioned this issue Mar 9, 2023

Feature/#55 react admin page Jimoou/BookLibrarySite-Backend#56

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Auth JS 6.4.0 causes issues in Angular apps when testing #1174

Auth JS 6.4.0 causes issues in Angular apps when testing #1174

mraible commented Apr 11, 2022

mraible commented Apr 11, 2022

mraible commented Apr 11, 2022

jaredperreault-okta commented Apr 11, 2022

mraible commented Apr 11, 2022 •

edited

Loading

saosebastiao commented Apr 14, 2022

jaredperreault-okta commented Apr 15, 2022

shuowu commented Apr 18, 2022

mraible commented Apr 18, 2022

mraible commented Apr 18, 2022 •

edited

Loading

StephenAtCFA commented Apr 18, 2022

jaredperreault-okta commented Apr 18, 2022

mrcotter commented Apr 19, 2022

jaredperreault-okta commented Apr 19, 2022

StephenAtCFA commented Apr 19, 2022

StephenAtCFA commented Apr 19, 2022

mrcotter commented Apr 20, 2022

mraible commented May 2, 2022

pzi commented May 4, 2022 •

edited

Loading

richmason commented May 26, 2022 •

edited

Loading

TD-DO commented Jun 9, 2022 •

edited

Loading

TD-DO commented Jun 10, 2022

jaredperreault-okta commented Jun 10, 2022

KLCarrierDirect commented Jul 6, 2022 •

edited

Loading

jaredperreault-okta commented Jul 6, 2022

KLCarrierDirect commented Jul 6, 2022 •

edited

Loading

jaredperreault-okta commented Jul 6, 2022 •

edited

Loading

pzi commented Jul 19, 2022 •

edited

Loading

KLCarrierDirect commented Jul 28, 2022 •

edited

Loading

jaredperreault-okta commented Jul 28, 2022

KLCarrierDirect commented Jul 29, 2022

jaredperreault-okta commented Jul 29, 2022

Auth JS 6.4.0 causes issues in Angular apps when testing #1174

Auth JS 6.4.0 causes issues in Angular apps when testing #1174

Comments

mraible commented Apr 11, 2022

Describe the bug?

What is expected to happen?

What is the actual behavior?

Reproduction Steps?

SDK Versions

Execution Environment

Additional Information?

mraible commented Apr 11, 2022

mraible commented Apr 11, 2022

jaredperreault-okta commented Apr 11, 2022

mraible commented Apr 11, 2022 • edited Loading

saosebastiao commented Apr 14, 2022

jaredperreault-okta commented Apr 15, 2022

shuowu commented Apr 18, 2022

mraible commented Apr 18, 2022

mraible commented Apr 18, 2022 • edited Loading

StephenAtCFA commented Apr 18, 2022

jaredperreault-okta commented Apr 18, 2022

mrcotter commented Apr 19, 2022

jaredperreault-okta commented Apr 19, 2022

StephenAtCFA commented Apr 19, 2022

StephenAtCFA commented Apr 19, 2022

mrcotter commented Apr 20, 2022

mraible commented May 2, 2022

pzi commented May 4, 2022 • edited Loading

richmason commented May 26, 2022 • edited Loading

TD-DO commented Jun 9, 2022 • edited Loading

TD-DO commented Jun 10, 2022

jaredperreault-okta commented Jun 10, 2022

KLCarrierDirect commented Jul 6, 2022 • edited Loading

jaredperreault-okta commented Jul 6, 2022

KLCarrierDirect commented Jul 6, 2022 • edited Loading

jaredperreault-okta commented Jul 6, 2022 • edited Loading

pzi commented Jul 19, 2022 • edited Loading

KLCarrierDirect commented Jul 28, 2022 • edited Loading

jaredperreault-okta commented Jul 28, 2022

KLCarrierDirect commented Jul 29, 2022

jaredperreault-okta commented Jul 29, 2022

mraible commented Apr 11, 2022 •

edited

Loading

mraible commented Apr 18, 2022 •

edited

Loading

pzi commented May 4, 2022 •

edited

Loading

richmason commented May 26, 2022 •

edited

Loading

TD-DO commented Jun 9, 2022 •

edited

Loading

KLCarrierDirect commented Jul 6, 2022 •

edited

Loading

KLCarrierDirect commented Jul 6, 2022 •

edited

Loading

jaredperreault-okta commented Jul 6, 2022 •

edited

Loading

pzi commented Jul 19, 2022 •

edited

Loading

KLCarrierDirect commented Jul 28, 2022 •

edited

Loading