Sign in with Adobe in a Next.js App
Use the power of Adobe to authenticate your Next app.
You can see the relevant Pull Request, and all the provider's code mentioned in this article, on GitHub: https://github.com/nextauthjs/next-auth/pull/8890
Whether you're a seasoned Auth geek, or a newbie, NextAuth (soon, Authjs.dev) is the auth lib to use. That's why we chose it for Omni, since we needed a stable Auth solution so we could focus on experience.
Adobe is a popular platform for creatives, and is widely used (obviously) internally at Adobe. From Behance, to Creative Cloud, and to Adobe Stock and many more, it's sort of the defacto for professional creatives. I believe it's a staple for products building in the art, media and design space, and sits right next to Google and ArtStation, and that made it a low-hanging fruit as an authentication feature for Omni's tools.
This article has been made after painful hours understanding Adobe's OAuth 2.0 documentation. But there's one thing I'm grateful for; standards in the boring stuff. OAuth 2.0 has really made life much easier than before. The wild days of crappy Auth setups are long gone, and almost all major providers follow the standard to quite an extent, making integrations a breeze. At least for the libraries and builders who understand the standard.
How to implement Adobe OAuth 2.0 Authentication
1. Create an account on Adobe's Developer Console
Pretty straightforward. Use your team's account to create a Developer account on Adobe. You should be able to see a console here: https://developer.adobe.com/console/home
An important question: What information do you want from Adobe? This is something that differs for each app. In our case, we just needed the bare minimum, so we went with Adobe Stock. You can see all the available scopes in OAuth 2.0 here.
2. Create a project
On the Adobe Developer Console, create a new project for the app you're working on.
3. Add an API
In the project you just created, you need to add an API.
We chose Adobe Stock here, as mentioned earlier, because it gave us what we needed at the bare minimum.
Make sure to choose an API with the OAuth Web App option. That's the one which'll work with Next.js. Read more on all the types here.
4. Configure the Credential
Default redirect URI: This is the domain where you're hosting your app. Use https.
Redirect URI pattern: This is a regex. This is the one I use:
https://({{YOUR-PROJECT-NAME-ON-VERCEL}}-.*-{{YOUR-TEAM-NAME-ON-VERCEL}}\.vercel\.app|localhost)(.*)/api/auth/callback/adobe5. Install NextAuth
Read more on that here. Set it up as per your requirements.
6. Add the Adobe Provider
If, by the time you're reading this article, our PR is not part of the main source code, you'll have to add a custom OAuth Provider. No worries, here's the code for that:
