Use Okta as the login instead of default payload auth.

[fast sapphire]

I have gone through the existing threads and scraped together some info but am stuck due to lack of resources on custom auth.

I have setup the custom auth strategy and applied it to the media collection

import { Strategy } from 'passport-openidconnect';

const OktaAuthStrategy = new Strategy({
    issuer: `${process.env.OKTA_OAUTH2_ISSUER}`,
    authorizationURL: `https://${process.env.OKTA_DOMAIN}/oauth2/default/v1/authorize`,
    tokenURL: `https://${process.env.OKTA_DOMAIN}/oauth2/default/v1/token`,
    userInfoURL: `https://${process.env.OKTA_DOMAIN}/oauth2/default/v1/userinfo`,
    clientID: `${process.env.OKTA_OAUTH2_CLIENT_ID}`,
    clientSecret: `${process.env.OKTA_OAUTH2_CLIENT_SECRET}`,
    callbackURL: 'http://localhost:3000/authorization-code/callback',
    scope: 'openid profile email'
  }, 
  (issuer, profile, accessToken, refreshToken, done) => {
    return done(null, profile);
  }
);

export default OktaAuthStrategy;

Media collection auth config:

auth: {
    disableLocalStrategy: true,
    strategies: [
      {
        name: 'media-openidconnect',
        strategy: OktaAuthStrategy
      }
    ],
  },

server.ts looks like the attached file to this post server.txt (due to char limit on post). I have followed the following article to setup okta auth using passport: https://developer.okta.com/blog/2018/05/18/node-authentication-with-passport-and-oidc

When I hit the login route I get back a res from okta and am redirected to /admin. However it fails to load throwing CORS for /init and /me routes. I assume for custom auth I'll have to implement those routes.

Can someone please guide me on what routes to override and other config required to setup okta as the login instead of the default payload login.

[cobalt lava]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Using the Payload Auth Middleware
• Uploads - Admin Thumbnails
• The Admin Panel - Admin Options - The Admin User Collection
• Swap in your own React components - Fields
• Authentication Config - Options - API keys

[fast sapphire]

@bleak terrace @mellow field @zinc robin Can you guys help out?

[dense patrol]

Do you mind sharing the full CORS errors?

@fast sapphire

Also, are you specifying CORS / CSRF in your payload config file?

[stiff rampart]

Additionally, please do not tag Payload team members directly.

[fast sapphire]

Okay

[fast sapphire]

I tried specifying in the CORS/CSRF as well but didn't work. However, I think that has to be done on the okta app as I'm trying to access the okta URL from the payload app correct?

Error.

**Init:**

Access to fetch at 'https://dev-69883096.okta.com/oauth2/default/v1/authorize?response_type=code&client_id=xxxxxxxxxxxxxxx&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauthorization-code%2Fcallback&scope=openid%20openid%20profile%20email&state=xxxxxxxxxxxxxxxxT%2BSphS%2F' (redirected from 'http://localhost:3000/api/users/init') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

**Me**

Access to fetch at 'https://dev-69883096.okta.com/oauth2/default/v1/authorize?response_type=code&client_id=xxxxxxxxxx&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauthorization-code%2Fcallback&scope=openid%20openid%20profile%20email&state=lxxxxD%2BmVSXdAZ9st5TmPCV5%2B' (redirected from 'http://localhost:3000/api/users/me') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[fast sapphire]

I have already white listed localhost:3000 on my okta app and tested it with a fetch call from the same localhost:3000 which works but on this /init and /me endpoint idk why it throws this error. Does custom auth require to implement certain endpoint in the express server?

Here's an SS for the same error.

[dense patrol]

@fast sapphire This looks like http://localhost:3000 is not whitelisted in Okta

That's just what the message appears to be saying

Can you take a screenshot of how you're setting CORS in Okta?

[fast sapphire]

I have already configured it in okta.

[fast sapphire]

I have also tried all sort of combinations with http://localhost and have tested by calling the okta endpoint using localhost:3000 which works

[dense patrol]

@fast sapphire just out of curiosity

can you remove the "default" part from the okta request url

An okta user posted once I was using https://{domain}.oktapreview.com/oauth2/default which meant to be used only for Custom Authorization Server, but my app is using the “regular” Org Authorization Server. I just removed that /default and things worked out for me.

So I'm wondering if the URL doesnt accept redirects from /authorize in general and the endpoint needs to be different

Okta has two types of authorization servers: the Org Authorization Server and Custom Authorization Server

Then later on, another user claims For anyone with the same issue, it appears that this only occurs when using Okta with a localhost app. Once your app is visible on a real domain the Origin header from Okta is set correctly, at least it is for me.

Which seems dubious