Problem when Logging into Application via Federated Okta

[saldanaj27]

Current behavior

I have been attempting to log into my application, but I keep coming across dead-ends or errors. Keycloak is the application's IDPSP however I am testing the login that is federated with Okta. At first, I attempted to test it through the UI, but the screen will show an "Invalid Access" or an "Authorization request not found." However, if I check the log in history through Okta, it would say that it send a successful log in. The login flow is successful when its done locally on my browser, so it's strange that I receive an error only through cypress. I found later that it could be because of the cookies being sent in the http requests have the "same-site" attribute defaulted to "lax" which blocks cookies requested from a different site. This is a part of the newer versions of Chrome as it was defaulted to "none" in the past versions.

I tried to send the requests individually, but the redirect request will follow to the home page of the okta rather than return back to the localhost hosting the keycloak IDP. (seen within the response headers/location)

I also replicated the Okta Authentication request within the Cypress documentation. However, it sends a request to a URL that returns a 404. I have never seen the URL in any of the logins.

This is the unknown URL.

None of the redirects share this URL.

I am not sure where to go from here. Any help would be appreciated.

Desired behavior

Cypress should login through the federated okta.

Test code to reproduce

it('should visit local host', () => {
cy.loginByAPI(
Cypress.env(username),
Cypress.env(password)
)
})

Cypress Version

10.7.0

Node version

v16.16.0

Operating System

macOS Monterey 12.5.1

Debug Logs

No response

Other

No response

[srivasud]

Any updates? Any help is much appreciated.

[emilyrohrbough]

@saldanaj27 Can you share the details of your custom cy.loginByAPI() custom command?

[saldanaj27]

Cypress.Commands.add('loginByOktaApi', (username, password) => {
    const authnRequest = {
        method: 'POST',
        url: `https://${Cypress.env('okta_domain')}/api/v1/authn`,
        headers: {
            'content-type': 'application/json',
            Accept: 'application/json',
        },
        form: false,
        body: {
            username: oktaUsername,
            password: oktaPassword
        }
    }

    let redirectURL = ""

    cy.request(authnRequest).then((res) => {
        const user = res.body._embedded.user
        const config = {
            issuer: `https://${Cypress.env('keycloak_domain')}/realms/SpringBootKeycloak`,
            clientId: 'login-client',
            redirectUri: 'http://localhost:8081/*',
            scope: ['openid', 'profile'],
        }

        const authClient = new OktaAuth(config)

        // cy.log(res.body.sessionToken)
        // cy.log(authClient.token.getWithoutPrompt({ sessionToken: res.body.sessionToken }))

        return authClient.token
            .getWithoutPrompt({ sessionToken: res.body.sessionToken })
            .then(({ tokens }) => {
                const userItem = {
                    token: tokens.accessToken.value,
                    user: {
                        sub: user.id,
                        email: user.profile.login,
                        given_name: user.profile.firstName,
                        family_name: user.profile.lastName,
                        preferred_username: user.profile.login,
                    },
                }

                window.localStorage.setItem('oktaCypress', JSON.stringify(userItem))

                log.snapshot('after')
                log.end()
            })
    })

This comes from the Okta Authentication page in the cypress docs. For the issuer URI, I have a keycloak URI as that is the issuer in the application.

[saldanaj27]

I was able to log in with Keycloak through API calls sent through cypress, however the Okta federated log in is still throwing errors.

[saldanaj27]

Update: I was able to erase all errors with the requests sent through the command, but when I visit my localhost it still sends me to the log in page. Am I meant to add more code elsewhere that would allow me to reach my endpoint or do I need to do something else? Any feedback would be greatly appreciated.

[chrisbreiding]

Right now there doesn't seem to be enough information to reproduce the problem on our end. If you can provide a self-contained reproducible example, ideally using https://github.com/cypress-io/cypress-test-tiny as a template, that would really help us debug this issue.

[chrislacey89]

@chrisbreiding @saldanaj27 I ran into this same problem when trying to use Okta login. Per Chris' suggestion, I recreated the issue here:
https://github.com/chrislacey89/cypressOktaBug. Can we reopen this issue?

[AtofStryker]

related to #16310

[AtofStryker]

Hey @chrislacey89 . Thank you for bumping this and sharing a reproduction repository. I opened chrislacey89/cypressOktaBug#1 against your reproduction repository to show how to fix this error.

The first(chrislacey89/cypressOktaBug@785c06e) is to get Okta login working as expected with cy.request as it is today.

The second, if you are interested, is how to log into okta via experimentalSessionAndOrigin, which should be generally available soon. This uses the new cy.session and cy.origin commands to log into okta and cache the session to perform more like a true E2E test.

I also have this forked on my github if anyone needs a reference incase this reproduction is taken down in the future.

@saldanaj27 is this information helpful in getting login working with Federated Okta?

[AtofStryker]

going to close as complete, but if the issue continues for whatever reason we can re open