2.1 Getting Started

To install vyou-react SDK in your ReactJs application we just need the following steps:

First, we need to copy the SDK bundle in your application sources. Let’s say all your application code is inside a folder called src, we just to copy vyou-react there, so our file tree should look like this:

my-application/src/
  ...
  App.tsx # or App.js
  vyou-react/

We also provide Typescript typings, so your chosen IDE or code editor (eg Microsoft’s Visual Studio Code) will add IntelliSense!

Next. We need to import the SDK CSS and, following the excellent ReactJs’ Context / Provider pattern, we’ll wrap our app inside VYouProvider.

import React from 'react'
import { VYouProvider } from './vyou-react'

import './vyou-react/style.css'

const BACKEND_BASEURL = 'https://MY-VYOU-BACKEND-URL'
const FRONTEND_BASEURL = 'https://MY-APP-FRONTEND-URL'

export const App = () => {
  return (
    <VYouProvider
      locale="en"
      baseUrl={BACKEND_BASEURL}
      oauth={{
        clientId: 'MY-VYOU-CLIENT-ID',
        redirectUri: `${FRONTEND_BASEURL}/vyou_callback.html`
      }}
      facebook={{
        appId: 'MY-FACEBOOK-APP-ID'
      }}
      google={{
        clientId: 'MY-GOOGLE-AUTH-CLIENT_ID'
      }}
    >
      <MyOtherProvider>
        <MyAppRoutes />
      </MyOtherProvider>
    </VYouProvider>
  )
}

Notice the following things:

  • We can set the locale for UI localization. Its value can be es or en. If not specified, the SDK will take user’s browser locale.
  • With baseUrl we’re telling the SDK where our VYou backend is.
  • oauth configures VYou OAuth service. redirectUri is the public URL where the OAuth service is going to redirect after a successful authorization to avoid CORS related issues. eg. If you’re using Create React App or vanilla Webpack with the copy plugin, you can just add an empty file inside the public folder. It can be just an empty file, there’s no need to have content.
  • facebook and google configure both services, in case you want your application provide these services.

Finally, the only library dependency required by the SDK is one you’re probably already using:

yarn add axios

That’s it! Now we’re ready to use the VYou ReactJs SDK!

Scroll to Top