As of version 2.0, Reaction Commerce uses ORY Hydra (Hydra), an OAuth 2.0 and Open ID Connect Provider, for authentication across the
Hydra issues access, refresh, and ID Tokens, but does not offer user management (like user sign up, log in, password reset flows). Instead, Hydra uses redirects and a REST API to connect with an existing identity provider.
The Reaction implementation sets up Hydra to use our existing Meteor application as the Identity provider. This gives us the benefits of OAuth2 and OpenID Connect, while allowing us to use our existing user system.
At a high level, when a user of the storefront logs in, the user is redirected from the storefront to Hydra, and then to the Identity provider, in this case, the Reaction API. When the authentication is complete on the Reaction app, Hydra handles the redirects between the Reaction app to the Storefront. From the user interface perspective, the authentication process is seamless across the application.
Read more about Hydra, OAuth2 and OpenID Connect on Hydra docs here.
Setting up the client
example-storefront is configured with Passport.js to initiate an OAuth flow for user signin. See the
server.js file for configuration details. For other available libraries that can be used in interacting with the OAuth server, see this list.
If your OAuth client, the relying party, is a Single-Page Application, consider using the implicit flow and client-side OpenID Connect libraries (example repo on GitHub).
Setting up the Identity Provider (IDP)
As mentioned above, Hydra does not provide user management. Reaction uses the existing Meteor User Accounts system in the Reaction API app. The
hydra-oauth core plugin in
reaction adds IDP features to the app.
This plugin enables both User Login and Consent Flows. Read more about these flows here.
Note that the Consent flow in this plugin skips showing a Consent UI because it’s built for the storefront as a first-party [known and trusted] client. If your use case is different, you should have a setup that shows a Consent UI when necessary. Read more about this on Hydra docs.
This plugin can serve as a reference to create extra IDP features.
Customizing the interface
hydra-oauth also provides the React component for the log in user interface. To change basic colors and typography, use the CSS styles applied in
templates.html. To use your own login form and add different user interactions, look at the React template in the
client and replace the component with your own using the Reaction
- Read the Debugging guide on the Hydra docs
- If you’re getting errors about your client configuration options (e.g
unknown client no client authentication included, or unsupported authentication method), use the examples in the ORY Examples repo on Github as reference
- To edit or delete a client configuration (in case of a wrong configuration), use the Hydra CLI contained in the image to run provided commands e.g
hydra clients delete $CLIENT_NAME
hydra -h(shows full list of options)
- You can run the commands with docker-compose as:
docker-compose run --rm -e "HYDRA_ADMIN_URL=$HYDRA_ADMIN_URL” hydra clients get $CLIENT_NAME