Home

This lib is meant to be used in a Vue project with Vue Router. If you're not using router functionality then this lib may be of limited use.

Using the lib

Creating an Auth Instance

Assuming your app will be hosted on the url https://mydomain.com/myapp, then you can import the lib and create an instance of it like the example below.

import { createOidcAuth, SignInType } from 'vue-oidc-client';

const appUrl = 'https://mydomain.com/myapp';

// SignInType could be Window or Popup
var mainOidc = createOidcAuth('main', SignInType.Window, appUrl , {
  authority: 'https://demo.identityserver.io/',
  client_id: 'implicit',
  response_type: 'id_token token',
  scope: 'openid profile email api'
});

Redirect Urls

The lib does not allow you to define the various redirect urls in the configuration object in the createOidcAuth() method. Choose the relevant generated url formats below when registering your app with an openid connect provider.

// authName and appUrl are the values passed in createOidcAuth()

// use these if SignInType is Window
redirect_uri = `${appBaseUrl}auth/signinwin/${authName}`;
post_logout_redirect_uri = appBaseUrl;

// use these if SignInType is Popup
popup_post_logout_redirect_uri = `${appBaseUrl}auth/signoutpop/${authName}`;
popup_redirect_uri = `${appBaseUrl}auth/signinpop/${authName}`;

Router Integration

When there's a route that needs to be protected with the mainOidc instance, add its authName to the route's meta property like below

const router = new Router({
  mode: 'history',
  routes: [
    ...
    {
      path: '/secret',
      name: 'secret-route',
      meta: {
        authName: mainOidc.authName
      },
      ...
    }
  ]
});

Finally after you've created the router instance, call the UseRouter() method to generate the callback handler routes and navigation guards.

mainOidc.useRouter(router);

Getting Current User Info

The auth instance provides three properties related to current user that you can use in various Vue components. These properties are reactive so the component will be notified if they change.

mainAuth.isAuthenticated; // if logged in
mainAuth.accessToken;     // if applicable
mainAuth.userProfile;     // user claims object

References

This lib uses the oidc-client lib under the hood and the configuration object for createOidcAuth() is the same one used by UserManager. Refer to the Configuration section to see all the possible config properties. Note the redirect urls are always defined by this lib and cannot be overridden.