"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Get the resources you need to start building today
Microsoft chose Payload to tell the world about AI.
Adding azure ad strategy results in webpack polyfill errors
Adding a strategy like that:
strategies: [
{
name: "azure-ad",
strategy: new OIDCStrategy({
clientID: ...,
identityMetadata: ...,
responseType: ...,
responseMode: ...,
redirectUrl: ...,
passReqToCallback: ...,
allowHttpForRedirectUrl: ...
}, (req, profile, done) => {
console.log("here");
})
}
]Results in multiple webpack polyfill errors about node server-only modules.
Difficult to help without posting the errors you're seeing.
You likely need to add aliases for that package.
https://payloadcms.com/docs/admin/excluding-server-code#aliasing-server-only-modulestestingtesting-payload-1 | WARNING in ./node_modules/dtrace-provider/dtrace-provider.js 18:22-85 testingtesting-payload-1 | Module not found: Error: Can't resolve './src/build' in '/home/node/app/node_modules/dtrace-provider' testingtesting-payload-1 | testingtesting-payload-1 | WARNING in ./node_modules/source-map-support/source-map-support.js 6:7-20 testingtesting-payload-1 | Module not found: Error: Can't resolve 'fs' in '/home/node/app/node_modules/source-map-support' testingtesting-payload-1 | testingtesting-payload-1 | ERROR in ./node_modules/bunyan/lib/bunyan.js 77:9-22 testingtesting-payload-1 | Module not found: Error: Can't resolve 'fs' in '/home/node/app/node_modules/bunyan/lib' testingtesting-payload-1 | testingtesting-payload-1 | ERROR in ./node_modules/mv/index.js 1:9-22 testingtesting-payload-1 | Module not found: Error: Can't resolve 'fs' in '/home/node/app/node_modules/mv' testingtesting-payload-1 | testingtesting-payload-1 | ERROR in ./node_modules/mv/node_modules/mkdirp/index.js 2:9-22 testingtesting-payload-1 | Module not found: Error: Can't resolve 'fs' in '/home/node/app/node_modules/mv/node_modules/mkdirp' testingtesting-payload-1 | testingtesting-payload-1 | ERROR in ./node_modules/ncp/lib/ncp.js 1:9-22 testingtesting-payload-1 | Module not found: Error: Can't resolve 'fs' in '/home/node/app/node_modules/ncp/lib' testingtesting-payload-1 | testingtesting-payload-1 | ERROR in ./node_modules/rimraf/node_modules/glob/sync.js 4:9-22 testingtesting-payload-1 | Module not found: Error: Can't resolve 'fs' in '/home/node/app/node_modules/rimraf/node_modules/glob' testingtesting-payload-1 | testingtesting-payload-1 | ERROR in ./node_modules/rimraf/rimraf.js 6:9-22 testingtesting-payload-1 | Module not found: Error: Can't resolve 'fs' in '/home/node/app/node_modules/rimraf' testingtesting-payload-1 | testingtesting-payload-1 | webpack compiled with 7 errors and 2 warningstried adding this to the webpack config in payload.config.ts but i get the same errors
webpack: (config) => ({ ...config, resolve: { ...config.resolve, fallback: { ...config.resolve.fallback, fs: require.resolve("fs"), os: require.resolve("os-browserify/browser"), stream: require.resolve("stream-browserify"), net: require.resolve("net"), tls: require.resolve("tls"), querystring: require.resolve("querystring-es3"), constants: require.resolve("constants-browserify"), }, } })I'd guess you need to alias
passport-azure-adwith a file that exports a blank OIDCStrategy
something like this?
payload.config.ts
webpack: (config) => ({ ...config, resolve: { ...config.resolve, fallback: { ...config.resolve.fallback, "passport-azure-ad": path.resolve(__dirname, 'mocks/azure-ad.ts') }, }mocks/azure-ad.ts
import { OIDCStrategy } from "passport-azure-ad"; export default OIDCStrategy;More like
class OIDCStrategy { constructor() {} } export default { OIDCStrategy}ah, getting the exact same error
Webpack errors are quite pesky. You might just have to play with it.
@249840137654108160let me know if you get Azure AD authentication working with Payload, working on setting it up myself atm and it's a real headache :)
couldnt get it working in a native way
but i did get it working through this plugin
https://github.com/thgh/payload-plugin-oauthwould you mind providing some example of how you set it all up? I've tried to integrate that plugin without luck so far - do you have to have a mongodb for it?
yes, i am working with mongodb, not sure if it would work with postgres
i'll try to get it working with a mongodb locally then. do you just follow the setup for the payload-plugin-oauth to get azure ad working, or do you also need passport-azure-ad etc?
well i do have passport-azure-ad installed
i dont really know if it is needed
i've set up a local mongodb db to test, and then I can at least run the project without it crashing
I have managed to get the login page to show the oauth2-button instead of the default payload-login, but it redirects me to '/oauth2/authorize' instead of the value I set in 'authorizePath'. How do you make the button go to the redirect-url? do you have to supply your own button somehow?
are you using the plugin?
yes :)
also i managed to use postgres with the plugin
you need to supply
sessionOptions: { resave: false, saveUninitialized: false, secret: process.env.PAYLOAD_SECRET, store: undefined },to the options
as its trying to store the session in mongodb
ah sick thanks. will test
got this from the plugin source code
const authorizePath = options.authorizePath ?? '/oauth2/authorize'so you either have a typo or something else is wrong
my button just redirects to '/oauth2/authorize'
Here's my config:
oAuthPlugin({ databaseUri: process.env.DATABASE_URI_LOCAL!, clientID: process.env.OAUTH_CLIENT_ID, clientSecret: process.env.OAUTH_CLIENT_SECRET, authorizePath: process.env.OAUTH_AUTH_ENDPOINT, authorizationURL: process.env.OAUTH_AUTH_ENDPOINT, tokenURL: process.env.OAUTH_TOKEN_ENDPOINT, callbackURL: process.env.OAUTH_CALLBACK_ENDPOINT, callbackPath: process.env.OAUTH_CALLBACK_ENDPOINT, async userinfo(accessToken) { console.log(accessToken); const { data: user } = await axios.get( process.env.OAUTH_USERINFO_ENDPOINT!, { headers: { Authorization: `Bearer ${accessToken}` } } ); return { sub: user.ID, username: user.preferred_username, }; }, sessionOptions: { resave: false, saveUninitialized: false, secret: process.env.PAYLOAD_SECRET, store: undefined, }, }),Did you supply your own button in any way?
nope
although im not using authorizePath
just authorizationUrl
is your project a standalone payload-project or have you set it up with payload-next in a monorepo kinda thing? Starting to think something might be funky since my project is a payload-next setup
nope
its a standalone payload app
nice, gonna test it in a standalone app to see if it works then. thanks for all the help so far btw :)
Sorry for all the spam 🥴
Got the flow to work where it's managing to sign me in via Azure, but there's something wonky with my redirect/callback setup. When I log in I just get redirected back to the '/admin/login'-page. Inspecting the Network-tab in DevTools I see there is a fetch to '/api/users/me' that returns 'user: null'.
Did you set up custom handling of endpoints '/oauth2/callback' and/or '/oauth2/authorize' in any way?
not really, no
Managed to get it working, had my callback set to 'localhost:3000/admin', changing it to 'localhost:3000/oauth2/callback' fixed the flow for me :)
thanks for all the help and pointers!
if you're going to use the default callbackUrl
you can remove it
as it defaults to {server}/oauth2/callback
Star
Discord
online
Get dedicated engineering support directly from the Payload team.