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 bees
oren
. 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 thepublic
folder. It can be just an empty file, there’s no need to have content.facebook
andgoogle
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!