Web2 Login
JoyID Web2 login allow you to login to your website using JoyID account. It is a simple and secure way to login to your website without the need to remember password.
Installation
npm install @joyid/evm
Initialization
Before writing business code, you can call the initialization function initConfig
on the project entry file. initConfig
function take a configuration object as parameter. The configuration object has the following properties:
backgroundImage
: Background image that will be shown on JoyID app, this parameter is followed by the CSS background property ↗ (opens in a new tab)joyidAppURL
: JoyID app url that your app is integrated with
The joyidAppURL
parameter of initConfig()
is the JoyID App URL that your app will connect to.
Note that to using Web2 login, you need to import function from @joyid/evm/web2login
instead of @joyid/evm
.
import React from "react";
import ReactDOM from "react-dom/client";
import { initConfig } from "@joyid/evm/web2login";
import App from "./App";
import "./index.css";
initConfig({
// background image that will be shown on JoyID app
// this parameter is followed by the CSS background property
// ref: https://developer.mozilla.org/en-US/docs/Web/CSS/background
backgroundImage: 'center center / cover no-repeat url("https://images.unsplash.com/photo-1601314167099-232775b3d6fd?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")',
// JoyID app url that your app is integrated with
joyidAppURL: "https://testnet.joyid.dev",
});
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
Connect to JoyID
After initialization, you can call the connect
function to connect to JoyID. The connect
function returns a Promise
, which will be resolved to uid
and entropy
when the connection is successful.
uid
: This is a unique identifier specific to each user.entropy
: Theentropy
value remains the same every time the user logs in.
The connect
function takes an optional uid
parameter. If uid
is provided, JoyID will use this specified uid
to sign and return the corresponding entropy
.
Otherwise, if no uid
is provided, JoyID will prompt the user either to create an account or to login with an existing one, then sign and returning the entropy
.
import { connect } from '@joyid/evm/web2login'
export default function App() {
const [response, setResponse] = React.useState();
const onConnect = async () => {
try {
const res = await connect(/* uid is optional */);
setResponse(res);
} catch (error) {
console.log(error);
}
};
return (
<div id="app">
<button className="btn btn-primary" onClick={onConnect}>
Connect JoyID
</button>
</div>
);
}
Try it out
For a complete demo, you may want to check GitHub ↗ (opens in a new tab) and Live Demo ↗ (opens in a new tab).