How to Add OpenLogin to a React app
This tutorial will show you how to integrate OpenLogin authentication into one of the most popular web front-end library: React.
You can find the source code of this is example on Github.
In order to use OpenLogin SDK, you'll need to create a project in Developer Dashboard and get your client ID.
App registration is not required for localhost development.
Ignore this step if you're integrating into an existing React project.
Install Torus OpenLogin SDK using either npm or yarn:
Initialize the SDK after your application is mounted using
useEffect hook and call
openlogin.login when user clicks login in your application.
openlogin.login and handling redirect result, your application will have access to the user's private key at
openlogin.privKey. You can use this private key to sign messages, generate public key to encrypt and decrypt data later, etc.
You can use @toruslabs/eccrypto to generate public key from the user's private key:
This public key can be shared with everyone who wants to communicate with the user.
The private key can be used to sign data to indicate that a message is sent by the user.
Everyone with the user's public key can verify if the message is signed by the user. For example, on server side, you can verify a signed message as a way to authenticate the user: