A Sample project configuring a VUE application with OpenIDConnect authentication. The sample was confirmed/adapted from this blog post utilizing KeyCloak instead of Auth0.
git clone https://github.com/sslaws/vue-auth.gitKeyCloak should be configured with a Sample realm and a Test client. The sample app is configured for Keycloak listening on port 9000 and the app on 8080.
You can run a sample KeyCloak instance pre-configured with most settings using Docker by executing the following
cd docker
docker-compose up -dOnce running, you can log into the admin console at https://localhost:9000 and then click on Administration Console and authenticate using credentials admin/admin. You should now add a new user by selecting Manage Users, click Add User. Add the username, First and Last Name and then save. Once saved, navigate to the Credentials tab and set a new password and ensure that Temporary is off and then click reset. You're user is now ready.
Install dependancies and run the application
cd app
npm install
npm run serveOpen a brower and navigate to http://localhost:8080 and you shoudld be able to click on the Login button and use the credentials you previously created.
The sample vue application is a standard VUE template with the following changes
- src/services/AuthService.ts
- public/callback.html
- src/views/Home.vue
- src/vue.config.js
The AuthService call was updated to pass the KeyCloak IDP Hint which allows for pre-selection of the identity provider. In our case, the hint has no effect as our Sample realm does not have GitHub configured as a provider.