Vue3-oidc

Library of openid connect (oidc) and oauth2 integrated by oidc client, vue3

📦 Install

``bash
pnpm i vue3-oidc
`

Running the Server Sample

`bash
$ cd example/server
$ npm install
$ npm run build
`

Running the Client Sample

`bash
$ cd example/client
$ npm install
$ npm run dev
`

!vue3-oidc

Getting Started

Configure the library by wrapping your application in createOidc and your initialization application when run createOidc:

`ts
//main.ts
import { createApp } from "vue";
import App from "./App.vue";
import "./oidc";
import router from "./router";

const app = createApp(App);

app.use(router);

app.mount("#app");
`

`ts
//oidc.ts
import type { VueOidcSettings } from "vue3-oidc";
import { createOidc, useOidcStore, useAuth } from "vue3-oidc";
import { unref } from "vue";

const { state } = useOidcStore();
const { setRedirectUri } = useAuth();

const oidcSettings: VueOidcSettings = {
authority: "http://localhost:4000",
scope: "openid",
client_id: "your client id",
client_secret: "your client secret",
redirect_uri: origin + "/oidc-callback",
response_type: "code",
loadUserInfo: true,
onSigninRedirectCallback(user) {
console.log(user);
location.href = unref(state).redirect_uri || "/";
},
onBeforeSigninRedirectCallback() {
setRedirectUri(location.pathname + location.search);
},
};

createOidc({
oidcSettings: oidcSettings, //your oidc settings
auth: true, //if auth is true,will auto authenticate
events: {}, //your oidc customization callback events
refreshToken: {
enable: true,
time: 30000,
},
//your key customization of oidc redirect callback
redirectUriKey: "CUSTOM_REDIRECT_URI",
});
`

$3

- useOidcStore

`ts
//type
import type { UserProfile } from "oidc-client-ts";
function useOidcStore(): {
state: ComputedRef>;
actions: ComputedRef;
};

interface OidcState {
oidcSettings: MaybeNull;
userManager: MaybeNull;
refreshUserManager: MaybeNull;
user: MaybeNull>;
token: ComputedRef;
hasExpiresAt: ComputedRef;
redirect_uri: string;
}

interface OidcActions {
setUser(user: User): void;
removeUser(): void;
}

type OidcUser = User & {
profile: UseUserProfile;
};

type UseUserProfile = T;
`

- useAuth

`ts
//type
function useAuth(): {
autoAuthenticate: typeof autoAuthenticate;
signinRedirect: typeof signinRedirect;
signoutRedirect: typeof signoutRedirect;
refreshToken: typeof refreshToken;
setRedirectUri: typeof setRedirectUri;
};
//autoAuthenticate - will try to authenticate the user silently
function autoAuthenticate(): Promise;
//signin callback
function signinRedirect(arg?: SigninRedirectArgs): void;
//signout callback
function signoutRedirect(arg?: SignoutRedirectArgs): void;
//refresh token
function refreshToken(
arg?: SigninSilentArgs,
success?: (user: User | null) => void | Promise,
fail?: (err: any) => void | Promise
): void;
//setRedirectUri
function setRedirectUri(uri: string): void;
``