Skip to main content

Vue.js & Nuxt.js SDK

Native Vue 3 composition API support for Glide Identity.

Installation​

npm install glide-web-client-sdk
# or
yarn add glide-web-client-sdk

Vue 3 Composition API​

<template>
  <div>
    <button @click="verifyPhone" :disabled="!isSupported">
      Verify Phone Number
    </button>
    
    <button @click="getPhone" :disabled="!isSupported">
      Get Phone Number
    </button>
    
    <div v-if="isLoading">Loading...</div>
    <div v-if="error">Error: {{ error.message }}</div>
    <div v-if="result">
      <p v-if="result.verified">✅ Phone verified!</p>
      <p v-if="result.phone_number">📱 {{ result.phone_number }}</p>
    </div>
  </div>
</template>

<script setup>
import { usePhoneAuth } from 'glide-web-client-sdk/vue';

const { 
  verifyPhoneNumber,
  getPhoneNumber,
  isSupported,
  isLoading,
  error,
  result
} = usePhoneAuth({
  endpoints: {
    prepare: '/api/phone-auth/prepare',
    process: '/api/phone-auth/process'
  },
  debug: true
});

async function verifyPhone() {
  await verifyPhoneNumber('+14155551234', {
    consent_data: {
      consent_text: 'I agree to verify my phone number',
      policy_link: 'https://example.com/privacy',
      policy_text: 'Privacy Policy'
    }
  });
}

async function getPhone() {
  await getPhoneNumber({
    consent_data: {
      consent_text: 'I agree to share my phone number',
      policy_link: 'https://example.com/privacy',
      policy_text: 'Privacy Policy'
    }
  });
}
</script>

Nuxt.js Integration​

1. Create Plugin​

// plugins/glide-auth.client.js
import { PhoneAuthClient } from 'glide-web-client-sdk';

export default defineNuxtPlugin(() => {
  const client = new PhoneAuthClient({
    endpoints: {
      prepare: '/api/phone-auth/prepare',
      process: '/api/phone-auth/process'
    },
    debug: true
  });

  return {
    provide: {
      phoneAuth: client
    }
  };
});

2. Create Composable​

// composables/usePhoneAuth.js
export const usePhoneAuth = () => {
  const { $phoneAuth } = useNuxtApp();
  const isLoading = ref(false);
  const error = ref(null);
  const result = ref(null);

  const verifyPhoneNumber = async (phoneNumber, options) => {
    isLoading.value = true;
    error.value = null;
    
    try {
      result.value = await $phoneAuth.verifyPhoneNumberComplete(phoneNumber, options);
      return result.value;
    } catch (err) {
      error.value = err;
      throw err;
    } finally {
      isLoading.value = false;
    }
  };

  const getPhoneNumber = async (options) => {
    isLoading.value = true;
    error.value = null;
    
    try {
      result.value = await $phoneAuth.getPhoneNumberComplete(options);
      return result.value;
    } catch (err) {
      error.value = err;
      throw err;
    } finally {
      isLoading.value = false;
    }
  };

  return {
    verifyPhoneNumber,
    getPhoneNumber,
    isLoading: readonly(isLoading),
    error: readonly(error),
    result: readonly(result),
    isSupported: computed(() => $phoneAuth.isSupported)
  };
};

3. Use in Pages​

<!-- pages/verify.vue -->
<template>
  <div>
    <h1>Phone Verification</h1>
    
    <form @submit.prevent="handleVerify">
      <input
        v-model="phoneNumber"
        type="tel"
        placeholder="+14155551234"
        required
      />
      
      <button type="submit" :disabled="isLoading">
        {{ isLoading ? 'Verifying...' : 'Verify Phone' }}
      </button>
    </form>
    
    <div v-if="error" class="error">
      {{ error.message }}
    </div>
    
    <div v-if="result?.verified" class="success">
      ✅ Phone number verified successfully!
    </div>
  </div>
</template>

<script setup>
const phoneNumber = ref('');
const { verifyPhoneNumber, isLoading, error, result } = usePhoneAuth();

async function handleVerify() {
  await verifyPhoneNumber(phoneNumber.value, {
    consent_data: {
      consent_text: 'I agree to verify my phone number',
      policy_link: 'https://example.com/privacy',
      policy_text: 'Privacy Policy'
    }
  });
}
</script>

Nuxt Server API Routes​

// server/api/phone-auth/prepare.post.js
import { GlideClient } from 'glide-sdk';

const glide = new GlideClient({
  apiKey: process.env.GLIDE_API_KEY
});

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  
  try {
    const response = await glide.magicAuth.prepare(body);
    return response;
  } catch (error) {
    throw createError({
      statusCode: error.status || 500,
      statusMessage: error.message
    });
  }
});
// server/api/phone-auth/process.post.js
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  
  try {
    if (body.use_case === 'VerifyPhoneNumber') {
      const response = await glide.magicAuth.verifyPhoneNumber(body);
      return response;
    } else {
      const response = await glide.magicAuth.getPhoneNumber(body);
      return response;
    }
  } catch (error) {
    throw createError({
      statusCode: error.status || 500,
      statusMessage: error.message
    });
  }
});

TypeScript Support​

// types/phone-auth.ts
interface PhoneAuthOptions {
  consent_data?: {
    consent_text: string;
    policy_link: string;
    policy_text: string;
  };
  plmn?: {
    mcc: string;
    mnc: string;
  };
}

interface PhoneAuthResult {
  phone_number?: string;
  verified?: boolean;
}

// Use with type safety
const { verifyPhoneNumber } = usePhoneAuth();

const result: PhoneAuthResult = await verifyPhoneNumber(
  '+14155551234',
  {
    consent_data: {
      consent_text: 'I agree',
      policy_link: 'https://example.com/privacy',
      policy_text: 'Privacy Policy'
    }
  }
);

Options API Support​

<script>
import { PhoneAuthClient } from 'glide-web-client-sdk';

export default {
  data() {
    return {
      client: null,
      isLoading: false,
      error: null,
      result: null
    };
  },
  
  mounted() {
    this.client = new PhoneAuthClient({
      endpoints: {
        prepare: '/api/phone-auth/prepare',
        process: '/api/phone-auth/process'
      }
    });
  },
  
  methods: {
    async verifyPhone(phoneNumber) {
      this.isLoading = true;
      this.error = null;
      
      try {
        this.result = await this.client.verifyPhoneNumberComplete(phoneNumber);
      } catch (error) {
        this.error = error;
      } finally {
        this.isLoading = false;
      }
    }
  }
};
</script>

Next Steps​