Vue.js Integration Example

npm install @doneisbetter/sso-client

// src/stores/auth.js
import { defineStore } from 'pinia';
import { SSOClient } from '@doneisbetter/sso-client';

const sso = new SSOClient('https://sso.doneisbetter.com');

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    loading: true
  }),

  actions: {
    async checkSession() {
      try {
        const session = await sso.validateSession();
        if (session.isValid) {
          this.user = session.user;
        }
      } catch (error) {
        console.error('Session validation failed:', error);
      }
      this.loading = false;
    },

    async login(username) {
      const response = await sso.register({ username });
      this.user = response.user;
      return response;
    },

    async logout() {
      await sso.logout();
      this.user = null;
    }
  }
});

<!-- src/App.vue -->
<template>
  <div v-if="!authStore.loading">
    <div v-if="!authStore.user">
      <button @click="handleLogin">Sign In</button>
    </div>
    <div v-else>
      <h2>Welcome, {{ authStore.user.username }}</h2>
      <button @click="authStore.logout">Sign Out</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useAuthStore } from './stores/auth';

const authStore = useAuthStore();

onMounted(() => {
  authStore.checkSession();
});

const handleLogin = async () => {
  try {
    await authStore.login('user@example.com');
  } catch (error) {
    console.error('Login failed:', error);
  }
};
</script>