Skip to content
PyasPyas
Start free
PyasConnect

The dialog your users connect their calendars in

PyasConnect shows Google Calendar, Outlook and Zoom, sends each person to the provider's own consent screen, and hands your app the connected account. On Pyas Auth, they approve Pyas Auth, which Google, Microsoft and Zoom have already verified, so there is no OAuth or app review for you to wait on.

Start freePyasConnect docs
The PyasConnect dialog offering Google Calendar, Outlook and Zoom
With your app's name, in your colors
In the dashboard

Shape it, try it live, copy the code

The dashboard's Lab builds PyasConnect on one of your apps: pick the providers, the display, the theme and the text, connect a real account in the live preview, then copy code written for your app with only what you changed.

app.pyas.io
The Lab in the Pyas dashboard: PyasConnect settings beside a live preview showing the dialog with Google Calendar, Outlook and Zoom

Fits your product, not the other way round

  • React, Vue, Angular or HTML@pyas/connect-react, @pyas/connect-vue, @pyas/connect-angular, or @pyas/connect for any page.
  • A dialog or in the pageOpen it as a dialog over your page, or place it inside a section of your own.
  • Popup or redirectThe provider's sign-in opens in a small window over your page, or takes the whole tab and comes back.
  • Your lookYour accent, text, background and border colors, corners and font, in light, dark or following the visitor. Every line of text can be changed.
  • Your button or oursUse PyasConnect's button, or hide it and open the dialog from one of yours.
  • Your user, on the accountYour server can pass your own ID for the person, so you find their accounts by it later.
Code

A component and one line on your server

Your server makes a connect session for each attempt with one line of the SDK, so your live API key never reaches the browser.

$ npm install @pyas/connect-vue
ConnectAccount.vue
<script setup>
import { PyasConnect } from '@pyas/connect-vue'

// A fresh session from your server for every attempt.
async function getSessionToken() {
  const res = await fetch('/api/pyas-session', { method: 'POST' })
  return (await res.json()).token
}

function onConnected(account) {
  // Keep account.accountId with your user.
}
</script>

<template>
  <PyasConnect :get-session-token="getSessionToken" @connected="onConnected" />
</template>
$ npm install @pyas/connect-react
ConnectAccount.jsx
import { PyasConnect } from '@pyas/connect-react'

// A fresh session from your server for every attempt.
const getSessionToken = async () => {
  const res = await fetch('/api/pyas-session', { method: 'POST' })
  return (await res.json()).token
}

export function ConnectAccount() {
  return (
    <PyasConnect
      getSessionToken={getSessionToken}
      onConnected={(account) => {
        // Keep account.accountId with your user.
      }}
    />
  )
}
$ npm install @pyas/connect-angular
connect-account.component.ts
import { Component } from '@angular/core'
import { PyasConnect } from '@pyas/connect-angular'

@Component({
  selector: 'app-connect-account',
  imports: [PyasConnect],
  template: `<pyas-connect [getSessionToken]="getSessionToken" (connected)="onConnected($event)"></pyas-connect>`,
})
export class ConnectAccount {
  // A fresh session from your server for every attempt.
  getSessionToken = async () => {
    const res = await fetch('/api/pyas-session', { method: 'POST' })
    return (await res.json()).token
  }

  onConnected(account: { accountId: string }) {
    // Keep account.accountId with your user.
  }
}
$ npm install @pyas/connect
index.html
<script type="module" src="https://cdn.jsdelivr.net/npm/@pyas/connect@2/dist/pyas-connect/pyas-connect.esm.js"></script>

<pyas-connect></pyas-connect>

<script>
  const connect = document.querySelector('pyas-connect')

  // A fresh session from your server for every attempt.
  connect.getSessionToken = async () => {
    const res = await fetch('/api/pyas-session', { method: 'POST' })
    return (await res.json()).token
  }

  connect.addEventListener('connected', (event) => {
    // Keep event.detail.accountId with your user.
  })
</script>
$ npm install @pyas/sdk
server.js
import { Pyas } from '@pyas/sdk'

const pyas = new Pyas({ apiKey: process.env.PYAS_API_KEY })

// Makes a connect session for each attempt; your live key stays on your server.
app.post('/api/pyas-session', pyas.connect.sessionHandler())

When a connection breaks

People revoke access and change passwords. Pyas tells you which account broke and why, and you bring the person back without them signing in to anything new.

In your product
Open PyasConnect with the account's ID and the person reconnects in your own page, keeping the same account ID.
Without PyasConnect
Build your own flow on the same endpoints: get a sign-in URL with GET /v2/connect/oauth, then connect the account with POST /v2/connect/accounts.