VYou documentation

# Web SDK

We're going to install -and this time locally is recommended- our package using your favourite package manager:

npm install @vyou/sdk

@vyou/sdk is organized in different sub-packages:

  • @vyou/sdk/web: the SDK core, framework and library agnostic.
  • @vyou/sdk/web/stripe: adds Stripe (opens new window) utilities to the core.
  • @vyou/sdk/react: a thin wrapper for React with convenience hooks and Provider component.
  • @vyou/sdk/react/stripe: like web but for React.

So, you must import the sub-package you need, eg:

import { setConfiguration } from '@vyou/sdk/web'

All our SDK packages are deeply typed using Typescript 🎉
So, if your code editor supports Typescript intellisense it's going to show you code completion and detect possible errors while typing.

WARNING

Both @vyou/sdk/web/stripe and @vyou/sdk/react/stripe have peer dependencies you need to install if you plan to consume those sub-packages:

npm i @stripe/stripe-js

# for @vyou/sdk/react/stripe
npm i @stripe/react-stripe-js

# vyou.config.json

In order to use the SDK we're going to need a configuration file you can download from the VYou backoffice. We think this is the simpler approach instead of dealing with Javascript objects around.

First make sure the dev-server is running and ready, then pick a tenant to configure, go to My Company -sidebar menu option- and you'll see the downloadable configuration file.

TIP

Remember to update the configuration each time the tenant data changes.

We just need to configure the SDK and then we'll ready to start interacting with VYou:

If you're using React you'll feel like home because the VYou SDK is using the Context / Provider pattern (opens new window), so VYouProvider will setup everything for you.

# Common use cases

Although you can explore the complete SDK API reference to know everything about the data and methods exposed, we're going to quickly explore some use cases we're sure every single app will have.

# Did the user sign in?

If we would like to know that if the user is signed in, we just need getSession -for React also the useSession hook is available-:

# Sign in / out

We need the signIn and signOut methods.
Both network and validation errors are correctly traced to let your app be completely aware.

import config from './vyou.config.json'
import { setConfiguration, signIn, signOut } from '@vyou/sdk/web'

setConfiguration(config)

signIn({ username: '', password: '' }).then(res => {
  if (res.error) {
    if (res.validation) {
      // this will happen if username / password don't meet the requirements
      return console.error('validation error', res.validation)
    }
    return console.error(res)
  }

  signOut(true).then(res => {
    console.log(res)
  })
})

# Get the user profile

Check getMyProfile.

import config from './vyou.config.json'
import { setConfiguration, getMyProfile } from '@vyou/sdk/web'

setConfiguration(config)

getMyProfile().then(res => {
  if (res.error) {
    return console.error(res)
  }

  const { email } = res.data
  console.log(`User email address is ${email}`)
})

# Running the codegen

As we introduced in the CLI section, @vyou/cli has the code generation command which we think is going to help you to get from zero to app really fast.

The only requirements are:

Then run this command:

vyou codegen ./src -o

What it does it generate ready to use React components inside ./src/vyou folder (the -o option overwrites the contents of that folder without asking you to confirm). In less than a seccond you can import the following components:

  • Provider (as we saw before)
  • Sign up form
  • Set password form
  • Complete profile form
  • Forgot password form
  • Login form
  • Stripe payment / subscription form

Also CSS stylesheets:

As you have the sources, you can always use the components as is or change whatever you like.
For example, let's rewite one of our previous examples, adding the Login Form component generated by our tool:

import React from 'react'
import { MyTenantProvider, MyTenantLoginForm } from './vyou'

import "./vyou/vyou.css"
import "./vyou/style.css"

const InnerApp = () => {
  return (
    <>
      <MyTenantLoginForm
        onSuccess={() => {
          console.log('Success tracked')
        }}
        onError={(_err) => {
          console.error('Also errors')
        }}
        onClickForgotPassword={() => {
          // or even other buttons
        }}
        strings={{
          emailAddress: 'Your i18n string for e-mail address'
        }} />
    </>
  )
}

export const App = () => {
  return (
    <MyTenantProvider>
      <InnerApp />
    </MyTenantProvider>
  )
}

All the components will have a prefix depending on the tenant name, in our case the prefix is MyTenant.

← Android SDK →