A sample application using Next-Auth.js and saml2-js
to authenticate with SAML IdPs.
The repository includes a Docker-Compose file that spins up the Next.js app in dev mode, alongside a mock IdP using the kristophjunge/test-saml-idp
image.
The mock IdP will be exposed under http://localhost:8080/simplesaml and our Next.js application under http://localhost:3000.
First, clone this repository to your local machine:
git clone https://github.com/Jenyus-Org/next-auth-saml.git
Then, use yarn
to install the dependencies:
yarn
In order to setup our service provider, we need to generate some SP keys, we can do so using OpenSSL:
openssl req -x509 -newkey rsa:4096 -keyout certs\key.pem
-out certs\cert.pem -nodes -days 900
Thanks to Docker-Compose we can launch the entire app using a single command:
docker-compose up --build
Now head to http://localhost:3000 and try logging in. The SAML credentials are user1
and user1pass
.
The functionality of this showcase is fairly simple. Due to the fact that Next-Auth.js requires a CSRF token in the authentication callbacks, we need to intercept the SAML assertion before we can pass on the SAML body to our authentication endpoint. We do so in the pages/api/auth/login/saml.js
file:
export default async (req, res) => {
if (req.method === "POST") {
const { data, headers } = await axios.get("/api/auth/csrf", {
baseURL: "http://localhost:3000",
});
const { csrfToken } = data;
const encodedSAMLBody = encodeURIComponent(JSON.stringify(req.body));
res.setHeader("set-cookie", headers["set-cookie"] ?? "");
return res.send(
`<html>
<body>
<form action="/api/auth/callback/saml" method="POST">
<input type="hidden" name="csrfToken" value="${csrfToken}"/>
<input type="hidden" name="samlBody" value="${encodedSAMLBody}"/>
</form>
<script>
document.forms[0].submit();
</script>
</body>
</html>`
);
}
};
This generates an HTML form that submits itself as soon as the file is returned, and is mapped to return a POST
request to the /api/auth/callback/:provider
route. Here it's important that :provider
matches the ID of our Credentials
provider in our Next-Auth.js config.
Note: You can read more about Next-Auth.js's REST API here.
To initiate the sign-in flow we accept GET
requests in the same API route handler, and generate a login request URL including our callback URL:
export default async (req, res) => {
const createLoginRequestUrl = (identityProvider, options = {}) =>
new Promise((resolve, reject) => {
serviceProvider.create_login_request_url(
identityProvider,
options,
(error, loginUrl) => {
if (error) {
reject(error);
}
resolve(loginUrl);
}
);
});
try {
const loginUrl = await createLoginRequestUrl(identityProvider);
return res.redirect(loginUrl);
} catch (error) {
console.error(error);
return res.sendStatus(500);
}
};
Note: Due to
saml2-js
being callback-based, we usePromise
to return a redirect or 500 status code to our route handler after generating the URL.
In our Next-Auth.js configuration we include a custom Credentials
provider that takes the SAML body and uses saml2-js
to parse it, as well as return the user and add it to our session:
export default NextAuth({
providers: [
Providers.Credentials({
id: "saml",
name: "SAML",
authorize: async ({ samlBody }) => {
samlBody = JSON.parse(decodeURIComponent(samlBody));
const postAssert = (identityProvider, samlBody) =>
new Promise((resolve, reject) => {
serviceProvider.post_assert(
identityProvider,
{
request_body: samlBody,
},
(error, response) => {
if (error) {
reject(error);
}
resolve(response);
}
);
});
try {
const { user } = await postAssert(identityProvider, samlBody);
return user;
} catch (error) {
console.error(error);
return null;
}
},
}),
],
callbacks: {
jwt: (token, user) => {
if (user) {
return {
user,
};
}
return token;
},
session: (session, { user }) => {
return {
...session,
user,
};
},
},
});
Note: You can read more about the
jwt
andsession
callbacks Next-Auth.js provides here.
- Setup a Single Sign On SAML Test Environment with Docker and NodeJS | by Jeffry Houser | disney-streaming | Medium
- Support multiple SAML 2 Identity Providers (IDP) · Issue #311 · nextauthjs/next-auth · GitHub
This sample was created to test and showcase the support for SAML in Next-Auth.js. As we can see, due to the requirement of a CSRF token in the /api/auth/signin/:provider
route we have to manually grab a token and generate a self-submitting <form>
. This solution has its own trade-offs compared to using a third-party provider like Osso which has its own Next-Auth.js provider.
This repository is open to pull requests that can enhance the flow! I.e. adding support for multiple IdPs, or finding a better way to support SAML POST
requests without having to add the CSRF token through a HTML self-submitting <form>
.