Keycloak with NextJS frontend and express backend
Unanswered
Siamese Crocodile posted this in #help-forum
Siamese CrocodileOP
whats the best way to integrate keycloak with a nextjs frontend and express backend? do I use nextauth's keycloak provider? or keycloak js package on the frontend? or what is it?
27 Replies
Siamese CrocodileOP
@Jboncz
Just my first thoughts is you should treat them as seperate entities in a way. Im assuming keycloak is some sort of auth library?
Its basically another part of the stack, its own standalone authentication pattern?
@Jboncz Just my first thoughts is you should treat them as seperate entities in a way. Im assuming keycloak is some sort of auth library?
Siamese CrocodileOP
its a complete user management tool (paraphrased it). provides you with authN, authZ etc etc
Gotcha, I just read their home page
So, keyCloak im assuming authenticates you and passes something over to nextjs and or express?
a saml response or something like that?
I kind of have a similar situation at work.
side node: key cloak looks really interesting, the skeleton of a robust authentication provider.
thats open source* which is most interesting part
@Jboncz So, keyCloak im assuming authenticates you and passes something over to nextjs and or express?
Siamese CrocodileOP
keycloak is basically an open source IAM tool. its not standalone but a tool that can be used in diff tech stacks (node, spring, or whatever implementations they support). it runs as a separate server and provides all functionalities like authN, authZ, OIC, SAML, Oauth, what not. think of it as scaled up passportjs. i hope i made sense?
@Jboncz side node: key cloak looks really interesting, the skeleton of a robust authentication provider.
Siamese CrocodileOP
oh its pretty widely used actually. really secure, gives everything out of box.
just have to fine tune it to our custom needs
Yeah it makes sense, really neat. So when you go to your nextjs site unauthenticated, do you redirect to keycloak to handle the auth?
Thats what I do. its a good idea 🙂 When a user authenticates to a 'realm' inside of keycloak, does keycloak know where to send you back to?
We call them realms at work, idk what the right word is
@Jboncz Yeah it makes sense, really neat. So when you go to your nextjs site unauthenticated, do you redirect to keycloak to handle the auth?
Siamese CrocodileOP
keycloak exposes endpoints like (say) for accesstokens, refreshtokens, oauth redirects, somehting like that. but I want my backend express to do so and not nextjs since i want to use nextjs ONLY as a frontend framework
@Jboncz Thats what I do. its a good idea 🙂 When a user authenticates to a 'realm' inside of keycloak, does keycloak know where to send you back to?
Siamese CrocodileOP
think of realms as individual apps. (my todo list app can be one realm, my social network can be another)
@Jboncz We call them realms at work, idk what the right word is
Siamese CrocodileOP
it IS called realm in keycloak
@Jboncz Thats what I do. its a good idea 🙂 When a user authenticates to a 'realm' inside of keycloak, does keycloak know where to send you back to?
Siamese CrocodileOP
yup! there are redirect uris i can customise
So I have essentially the exact same setup in my internal application, I dont use any extensions inside of nextjs or express to make it work (mostly because there is no library for it)
So you need the express and nextjs instance to 'share' a authentication token yeah? Is the express instance only acessible THROUGH the nextjs site? Or will other services hit the express api independantly?
Once you do the redirect, you should just cut off the connection to keyCloak.
If a user is navigating to /int/blah/blah and they arent authed, use middleware to set a cookie go auth then check if they have a redirect cookie and send em on there merry way
Just my two cents
and how I handle it with a couple thousand visits internally daily