@crossid/vue-wrapper - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

src/index.d.ts

package.json

		{
		"name": "@crossid/vue-wrapper",
		"scope": "@crossid",
		"version": "1.0.2",
		"version": "1.0.3",
		"description": "A wrapper for the crossid oauth2 client for vue3",
		@@ -6,0 +6,0 @@ "main": "index.js",

127

README.md

		@@ -9,7 +9,130 @@ # Install vue CLI
		# Enable typescript for project
		vue add typescript



		# Install crossid vue wrapper
		npm install @crossid/vue-wrapper

		# Create a new crossid client and globaly register wrapper components
		In main.ts:

		```javascript
		import { create } from "@crossid/vue-wrapper";

		const [AuthProvider, AuthCallback] = create({
		issuer: "https://dev.local.crossid.io/oauth2/default/",
		authorization_endpoint: "https://dev.local.crossid.io/oauth2/default/auth",
		token_endpoint: "https://dev.local.crossid.io/oauth2/default/token",
		client_id: "<client-id>",
		refreshToken: true,
		redirect_uri:
		window.location.protocol + "//" + window.location.host + "/callback",
		audience: ["<app-id>"],
		scope: "openid offline_access profile email",
		});

		createApp(App)
		.component("AuthProvider", AuthProvider)
		.component("AuthCallback", AuthCallback)
		.mount("#app");
		```

		# Create a protected component Protected.vue
		(This is for non automatic redirects)
		```html
		<template>
		<!-- user will be avaliable here if isAuthenticated === true -->
		<!-- without "disableAutoLogin", the component will automatically redirect the user to the login page -->
		<AuthProvider disableAutoLogin="true" v-slot="{ user, loginRedirect, isAuthenticated }">
		<h1 v-if="isAuthenticated">Hello {{ user.name }}</h1>
		<button
		v-else
		v-on:click="loginRedirect('<app-id>', 'openid offline_access profile email', returnTo)"
		>
		Login!
		</button>
		</AuthProvider>
		</template>

		<script>
		export default {
		name: "Protected",
		data() {
		return { returnTo: window.location.href };
		},

		props: {
		msg: String,
		},
		};
		</script>

		<!-- Add "scoped" attribute to limit CSS to this component only -->
		<style scoped>
		h3 {
		margin: 40px 0 0;
		}
		ul {
		list-style-type: none;
		padding: 0;
		}
		li {
		display: inline-block;
		margin: 0 10px;
		}
		a {
		color: #42b983;
		}
		</style>
		```

		# Register components in App.vue
		```html
		<template>
		<img alt="Vue logo" src="./assets/logo.png" />
		<div v-if="currentRoute == '/callback'">
		<!-- we need @navigate="navigate() to respond to redirect events back to "main" page after callback-->
		<AuthCallback @navigate="navigate()">callback...</AuthCallback>
		</div>
		<div v-else>
		<Protected />
		</div>
		</template>

		<script lang="ts">
		// Our protected component
		import Protected from "./components/Protected.vue";

		export default {
		name: "App",
		// This is a basic routing / navigation setup
		data() {
		return { currentRoute: window.location.pathname };
		},
		components: {
		Protected,
		},
		methods: {
		// This is needed to respond to redirect event after callback
		navigate() {
		//@ts-ignore
		this.currentRoute = window.location.pathname;
		},
		},
		};
		</script>

		<style>
		OAuthCallback #app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
		}
		</style>

		```

		# Run the app
		npm run serve

@crossid/vue-wrapper - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics