NextJS Custom login page calling sign-in api built with okta-auth-js on NodeJS backend

Questions OAuth/OIDC
1

Hey, Everyone!!!

I am trying to build an end-to-end application having Custom Sign-in Page (built with NEXTJS) which will call one /sign-in API on the backend (built on NodeJS) which is using okta-auth-js to perform signing with credentials and to provide signing response to Client application.

On Front-end, trying to leverage NextAuth’s Credential Provider flow to call this /sign-in API with credential received from the custom sign-in component and get active session.

I want to achieve proper OKTA SSO with this kind way of implementation on browser end so that other OKTA SSO linked application (running in browser) can also have access to this session and SSO can be achieved. I need to have my custom signing page as a requirement.

  • Questions
  1. If this flow can be achieved?
  2. Sign-in API is responding properly with active session token. How I can leverage this response to create active OKTA session on browser so that other app can perform sign on with OKTA?
    (I tried to set header coming from signInWithCredentials method response of okta-auth-js, but it still didn’t worked)
  • Issues:

  1. I tried to implement Redirect flow with active session token from frontend but unable to handle it with Next JS.
    Created on callback page to handle response after successful redirect and complete /v1/token flow but getting
    error=login_required error_description=The+client+specified+not+to+prompt+but+the+user+is+not+logged+in.
    on /v1/authorize redirect state.

  2. I have to bypass OKTA Hosted Signin Widget and use my own signin page and API.

If anyone have any better suggestion… do let me know.

2

Hello,
If your backend application is logging the user into Okta (/api/v1/authn), a sessionToken should be returned. This sessionToken would need to be passed back to the client application which would exchange that sessionToken for a browser session cookie with one of the 3 methods defined in the link below,

3

I tried:

  1. Retrieving a session cookie by visiting the OpenID Connect Authorization Endpoint
    Created this url to execute exchange flow for cookie with session token.
const url = `https://${oktaOrgURL}/oauth2/v1/authorize?client_id=${clientId}&response_type=id_token&scope=openid&prompt=none&redirect_uri=http://localhost:3000&state=Af0ifjslDkj&nonce=${uuid.v4()}&sessionToken=${session.sessionToken}`

Router.push(url);

Getting this in URL and also no browser cookie received:
http://localhost:3000/#state=Af0ifjslDkj&error=login_required&error_description=The+client+specified+not+to+prompt%2C+but+the+user+is+not+logged+in.

  1. Retrieve a session cookie by visiting a session redirect link
const url = `https://dev-71008166.okta.com/login/sessionCookieRedirect?token=${session.sessionToken}&redirectUrl=http://localhost:3000

It is taking to OKTA Signin Widget which I am trying to avoid.