Our Vue.js application is currently based on Amazon Cognito’s Hosted UI. Due to the limitations of this approach, such as very limited UI customization support, we plan to use Auth0 Lock (i.e., the hosted UI), integrated with our existing Cognito user pool. Our main motivation for staying with the existing Cognito user pool is that we are using custom attributes in Cognito and want to limit code changes as much as possible at this point in time due to an upcoming release to production.
There is plenty of documentation around that describes how to use the Cognito Hosted UI for authenticating against Auth0 user pools. However, I haven’t been able to find anything useful for connecting Auth0 to Cognito as an OIDC identity provider, and replace the Cognito Hosted UI by the Lock hosted UI.
At a high, functional level, I want our Vue.js application to identify the lack of a valid token, then redirect to Lock, make the user authenticate, make Auth0 inform Cognito about this, and ensure that Cognito provides the correct tokens. The Cognito integration guide on Auth0’s Web site actually describes this very well:
“You can use Auth0 Lock to log the user in. You can read detailed instructions on how to implement Lock in the libraries documentation. Once the user is successfully logged in with Auth0, the next step is to send their credentials to Amazon Cognito see the Cognito docs to see how to implement this depending on the platform. Cognito takes the ID token that you obtain from the OIDC identity provider and uses it to manufacture unique Cognito IDs for each person who uses your app. When the user is logged in to Cognito through Auth0, you can store information in Cognito that only this user will be able to access.”
(Source: Integrate with Amazon Cognito)
Any help is greatly appreciated.