Using React Auth Wrapper

You need to first register your app using the Arcana Developer Dashboard and obtain a unique Client ID. Next, configure user onboarding options for the app using the Arcana Developer Dashboard. Then install the auth package and the Auth React component wrapper auth-react package and integrate the app with the Arcana Auth SDK before adding code to onboard users.

To integrate the Arcana Auth SDK and use the 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>
  );
}

Using React Auth Wrapper

See Also