I have configured the popular social login providers for numerous applications over the years. Despite knowing a few things about identity, I find the configuration process tedious and confusing, and when talking to other developers, they have similar complaints.
We strive to simplify login and registration at Hellō, and question why you need deep expertise in OAuth and OpenID Connect to use social login. How can we help you get up and running quickly so you can decide if Hellō is the right solution for you? This question led us to not require you to start your journey with the Hellō Developer Console, but with a simplified initial experience that creates a basic application for you.
Our first use of Quickstart was with Hellō Login, our free WordPress plugin. You don't need to figure out your
redirect_uri, or copy and paste a
When creating our Next.js SDK for Hellō, we saw an opportunity to innovate to simplify configuration even more.
Redirect URI Discovery
In our WordPress plug-in, we have code running in the application that knows its callback URL, which we can pass to Quickstart to be configured for the app at the Hellō Developer Console.
For application development, we enable
localhost by default which allows you, the developer, to get up and running on your own machine when starting with Hellō -- but you still need to configure the
redirect_uri for any deployments that you want to share. On modern development platforms such as Vercel, configuring the
redirect_uri is much more complicated as each preview deployment is at a randomly generated hostname by default.
When building our Hellō Next.js Sample application that demonstrates how to use our
@hellocoop/nextjs npm module, we set a goal to eliminate any manual configuration requirements when running locally, and when deploying to Vercel. To simplify endpoint discovery as well as deployment, there is only one endpoint (
/api/hellocoop) for all functionality - login, logout, and callback (
redirect_uri). To learn the URL location of the endpoint when login is called, we send a small script back to the browser to get
window.location.href and send it back to the endpoint. This provides the correct
redirect_uri even when the server is behind a proxy. We then use this
redirect_uri to create the authorization request.
redirect_uri is only the first step. If the application is running on
http://localhost:* Hellō will let the developer through as we have enabled those
redirect_uri values (details at Hellō
localhost). To enable auto-configuration, we added an option to enable any
https://* URL for the development team.
This allows the development team to flow through Hellō for an arbitrary
redirect_uri. The Hellō Wallet appends a
wildcard_domain query request to the response so that the
@hellocoop/nextjs package can detect a member of the development team has used an unconfigured
redirect_uri, and prompt them to add it to their app after logging them in. They are then taken to the Hellō Developer Console where they can decide to add it as a Development or Production Redirect URI -- and the app is configured!
For those interested, here is the sequence diagram:
Redirect URI Auto-configuration