npm install @arcana/auth-react
Wrap you app with ProvideAuth
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { AuthProvider } from "@arcana/auth";
import { ProvideAuth } from "@arcana/auth-react";
const provider = new AuthProvider(`${appId}`)
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<ProvideAuth provider={provider}>
<App />
</ProvideAuth>
</React.StrictMode>
);
App.js
import { useAuth } from "@arcana/auth-react";
function App() {
const { loading, isLoggedIn, connect, user } = useAuth()
const onConnectClick = async () => {
try {
await connect();
} catch (err) {
console.log({ err });
// Handle error
}
};
if (loading) {
return <p>Loading...</p>;
}
if (!isLoggedIn) {
return (
<button onClick={onConnectClick}>
Connect
</button>
);
}
return <Info info={user} />;
}
export default App
useAuth
return type
type AuthContextType = {
loading: boolean;
connect: () => Promise<EthereumProvider>;
loginWithLink: (p: string) => Promise<EthereumProvider>;
loginWithSocial: (p: string) => Promise<EthereumProvider>;
logout: () => void;
isLoggedIn: boolean;
availableLogins: Logins[];
provider: EthereumProvider;
user: UserInfo | null;
theme: "dark" | "light";
logo: string
};
App.js
import { Auth } from "@arcana/auth-react";
function App() {
const { isLoggedIn, user } = useAuth()
if (!isLoggedIn) {
return ;
}
return ;
}
export default App;