Capturing the Device ID in a Universal Login
The Auth0 Universal Login does not allow customizing HTML templates. The client-side application can, however, provide authorization parameters. When using the Auth0 SDK for React Single Page Applications, the verosint_deviceid
authorization parameters can be passed during the login event.
To use the library, add it to the project using:
npm install verosintjs
In the component that handles login, use the following pattern to generate the device ID:
import { useAuth0 } from "@auth0/auth0-react";
import { getDeviceId } from "verosintjs";
...
const [verosintDeviceId, setVerosintDeviceId] = useState('');
useEffect(() => {
getDeviceId().then((id) => setVerosintDeviceId(id));
}, []);
const {
user,
isAuthenticated,
loginWithRedirect,
logout,
} = useAuth0();
Invoke the loginWithRedirect
function with the device ID, for example:
{!isAuthenticated && (
<NavItem>
<Button
id="qsLoginBtn"
color="primary"
className="btn-margin"
onClick={() => loginWithRedirect({
authorizationParams: {
verosint_deviceid: verosintDeviceId,
}
})}
>
Log in
</Button>
</NavItem>
)}
Updated 4 months ago