Using React Auth Wrapper
You need to first install the Arcana Auth SDK and Auth React component wrapper and configure user onboarding options using the Arcana Dashboard.
To integrate the Arcana Auth SDK and use the Arcana Auth React Wrapper component, ProvideAuth
, you need to update the index.js
and App.js
files as listed below:
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import { AuthProvider } from "@arcana/auth";
import { ProvideAuth } from "@arcana/auth-react";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
const provider = new AuthProvider(process.env.REACT_APP_ARCANA_APP_ID); //See SDK Reference Guide for optional parameters
root.render(
<StrictMode>
<ProvideAuth provider={provider}>
<App />
</ProvideAuth>
</StrictMode>
);
App.js
import React from "react";
import { Auth } from "@arcana/auth-react";
import { Button } from "./components";
import styled from "styled-components";
import "./styles.css";
const Wrapper = styled.div`
width: 100%;
margin: 0 auto;
padding: 20px 20px;
display: flex;
@media (max-width: 768px) {
flex-direction: column;
}
`;
const Section = styled.div`
width: 100%;
display: flex;
flex-direction: column;
> * {
&:not(:first-child) {
margin-top: 20px;
}
}
`;
const LeftSection = styled.div`
width: 20%;
margin: 0 auto;
@media (max-width: 768px) {
width: 100%;
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid white;
}
`;
const RightSection = styled.div`
width: 78%;
margin: 0 auto;
@media (max-width: 768px) {
width: 100%;
}
`;
const Heading = styled.h2`
color: white;
font-family: "Sora", sans-serif;
text-align: center;
`;
export default function App() {
const [theme, setTheme] = React.useState("light");
const [externalWallet, showExternalWallet] = React.useState(false);
return (
<Wrapper>
<LeftSection>
<Section>
<Heading>Theme</Heading>
<Button onClick={() => setTheme("light")}>Light mode</Button>
<br />
<Button onClick={() => setTheme("dark")}>Dark mode</Button>
</Section>
<Section>
<Heading>External Wallet</Heading>
<Button onClick={() => showExternalWallet(true)}>Show</Button>
<br />
<Button onClick={() => showExternalWallet(false)}>Hide</Button>
</Section>
</LeftSection>
<RightSection>
<Auth externalWallet={externalWallet} theme={theme} />
</RightSection>
</Wrapper>
);
}
See Also
Last update:
March 7, 2023 by