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, so we’re going to create a new folder called vyou and copy vyou-react and vyou-core from our distribution SDK. The only requirement is that these folders need to share the same root. So, our file tree should look like this:

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

Inside each folder we also provide Typescript typings, so your chosen IDE / 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/vyou-react'

import './vyou/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='es_ES'
      tenantUrl={BACKEND_BASEURL}
      oauth={{
        signUrl: BACKEND_BASEURL,
        clientId: 'MY-VYOU-CLIENT-ID',
        redirectUri: `${FRONTEND_BASEURL}/vyou_oauth_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 all the texts that we show in our UI (ATM es_ES);
  • with tenantUrl we’re telling the SDK where our VYou backend is;
  • oauth configures VYou OAuth service, where redirectUri is a public URI that needs to be under the same host where your frontend application is in order to avoid CORS issues when the OAuth service redirects after authentication (there’s no need to display 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