Skip to content
Snippets Groups Projects
Bruce Flynn's avatar
Bruce Flynn authored
98afff88
History
Name Last commit Last update
api
vue-auth-oidc
README.md

Keycloak Auth Example

This is a full example demonstrating a client-side application using a back-end API that required authentication. In this case authentication is provided by Keycloak, but in reality it should be pretty simillar using any OIDC provider.

Setup Keycloak

Run in Docker

Start Keycloak

docker run -d --name keycloak -p 8081:8080 jboss/keycloak:6.0.1

Create admin user

docker exec keycloak/bin/add-auth-keycloak.sh -u admin -p keycloak
docker restart keycloak

Setup client config

  1. Add new realm "Vue Test Realm"
  2. Add new client
  3. Add new user:
    • username: testuser email: testuser@email.com first: Test last: User
    • Click "Email Verified"
    • Add new Role Mapping for client vue-test admin role
  4. Set password on "Credentials tab"
    • Make sure it's not temporary

Setup Vue OIDC App

This app uses vuex-oidc rather than the built in Keycloak adapter because it's a bit more batteries-included. I may end up adding an additional example app that uses the built in adapter in the future.

cd vue-auth-oidc
npm install
npm run serve

Setup API

The API is a very simple Pyramid app that uses pyramid_jwt to verify the JWT access token. It has only a single route /api/items that returns a list of items for GET requests and creates an item for POST that requires authentication.

cd api
virtualenv env
source ./env/bin/activate
pip install -e .
pserve --reload development.ini

References