This project is an example of using the custom_identity_provider
feature of LiveChat Chat Widget and personal web service.
It presents a use case of binding own User's identity and LiveChat Customer identity to provide a more seamless experience for the User.
The signup
process of the new User creates the dedicated LiveChat customer and updates its metadata with the data provided by the User.
During the signin
process, the User is authorized to access the profile page. Then, the LiveChat Chat Widget is loaded and fetches the /auth/lc/token
endpoint to retrieve an access token for the customer associated with the current User.
Thanks to maintaining the connection between the application user and LiveChat Customer, the chat history and identity can be restored on multiple devices and sessions after successful `signin'.
To successfully run Customer authorization for LiveChat license, the custom integration application needs to be created on that license. To do so, go to Developers Console, make a new application, and then follow the Step 1 Configure the Authorization building block instructions.
Remember for Authorization building block:
- no particular Access scopes needs to be specified
- the Redirect URI whitelist needs to contain a
http://localhost:3000
address
To properly run an app locally, create a simple configuration file .env.local
at the top of the project directory with the following content:
SECRET=''
LC_CLIENT_ID=''
NEXT_PUBLIC_LC_LICENSE_ID=''
Replace missing values with:
SECRET
: secret used as JWT signature, for example Random UUIDLC_CLIENT_ID
: integration's client_id from Developers ConsoleNEXT_PUBLIC_LC_LICENSE_ID
: LiveChat license id
First, install dependencies:
npm install
# or
yarn
Then, run DB initial migration:
npm run db:migrate
# or
yarn db:migrate
And lastly, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
The app views are stored in pages
directory. Each file corresponds to a separated React page.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.