Start building: login & create a wallet via API

import "./App.css";
import { useRef, useState } from "react";

const baseURL = "https://api.dfns.io"; // .io for prod, .ninja for staging
const credentialName = "DemoLogin";
const DEFAULT_ORG_ID = "or-**\***-**\***-**\*\***\*\*\*\***\*\***"; // your org id here for convenience
const DEFAULT_EMAIL = "**\*\*\***@mycompany.com"; // your email here for convenience

function App() {
const codeRef = useRef();
const [registrationState, setRegistrationState] = useState({});
const handleRegister = () => {
const code = codeRef.current.value;
/_ HERE GOES THE CODE FOR REGISTERING A CREDENTIAL _/
// uncomment when completed
// .then(setRegistrationState)
// .catch(setRegistrationState)
};

const orgIdRef = useRef(DEFAULT*ORG_ID);
const emailRef = useRef(DEFAULT_EMAIL);
const [loginState, setLoginState] = useState({});
const handleLogin = () => {
const orgId = orgIdRef.current.value;
const email = emailRef.current.value;
/* HERE GOES THE CODE FOR LOGIN \_/
// uncomment when completed
// .then(setLoginState)
// .catch(setLoginState)
};

return (

<div className="App">
<h1>User login demo app</h1>
<h2>1. Credential registration</h2>
<div>
<p>If not done already, you need to register on this website. Get a Credential Code from the <a rel="noreferrer" href="https://app.dfns.io/v3/settings/authentication/credentials" target="_blank">dashboard</a> (Settings &gt; Authentication &gt; Credentials)</p>
<p><label>Enter your Credential Code: <input type="text" ref={codeRef}></input></label></p>
<p><button onClick={handleRegister}>Register</button></p>
<p>Current state: <small><code>{JSON.stringify(registrationState, null, 2)}</code></small></p>
</div>

<h2>2. User login</h2>
<div>
<p><label>Enter your Organization Id Code: <input type="text" ref={orgIdRef} defaultValue={DEFAULT_ORG_ID}></input></label</p>
<p><label>Enter your Email address: <input type="email" ref={emailRef} defaultValue={DEFAULT_EMAIL}></input></label></p>
<p><button onClick={handleLogin}>Login</button></p>
<p>Current state: <small><code>{JSON.stringify(loginState, null, 2)}</code></small></p>
</div>
</div>

);
}

export default App;

/_ Helpers to convert challenges from Dfns format to WebAuthn format _/

function base64url*decode(value) {
const m = value.length % 4;
return Uint8Array.from(
atob(
value
.replace(/-/g, "+")
.replace(/*/g, "/")
.padEnd(value.length + (m === 0 ? 0 : 4 - m), "=")
),
(c) => c.charCodeAt(0)
).buffer;
}

function base64url*encode(buffer) {
return btoa(
Array.from(new Uint8Array(buffer), (b) => String.fromCharCode(b)).join("")
)
.replace(/\+/g, "-")
.replace(/\//g, "*")
.replace(/=+$/, "");
}

function string_to_ArrayBuffer(value) {
var enc = new TextEncoder();
return enc.encode(value).buffer;
}