Comment on page
Quick Start Guide
Get started using SlashAuth in your React App app in just a few minutes.
SlashAuth allows your React application to quickly log users in (authenticate) and verify their access level (authorize) using only their web3 wallet. This guide shows you how to quickly build authentication using the SlashAuth React SDK. If you would like to jump to a complete example code, check it out on github.
Navigate to the SlashAuth dashboard and login using your Metamask wallet. You'll have to sign a local transaction to authenticate to the SlashAuth app. This is a local signature only - no gas fees are charged. You can read more about local signatures in Metamask's docs.
Logging in will pop up Metamask to sign a local message. This logs you into SlashAuth
Similar to Oauth2 standard, an application contains a client ID, client secret, and other authorization parameters to keep your users and your application safe. For now we'll create a simple application. Click the
New App button in the top right and fill in some details such as the name and description.
Your Client ID tells SlashAuth which app to log your user into. This is not a sensitive key and will be used publicly so no need to conceal it. Once you save your app, grab the generated client ID because we'll need this later.
You can also add token gating on this screen to block access to your app unless the user holds a specific number of tokens or NFTs. We cover that in our token gating section.
Install the javascript library via NPM
The best way to interact with our API is to use one of our official libraries:
NPM
Yarn
npm i @slashauth/slashauth-react
yarn add @slashauth/slashauth-react
The SDK exposes hooks and variables to integrate SlashAuth with your React application via React Hooks.
The SlashAuth SDK uses React Context to manage state and expose it to your components. In order to integrate SlashAuth into your app, you must provide the context at the root of your app:
// file:index.tsx
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { SlashAuthProvider } from '@slashauth/slashauth-react';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<SlashAuthProvider
clientID={/* YOUR CLIENT ID */}
>
<App />
</SlashAuthProvider>
);
The
SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly. The SlashAuth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function
openSignIn() from the useSlashAuth() hook to accomplish this.// file:LoginButton.tsx
import { useSlashAuth } from "@slashauth/slashauth-react";
export const LoginButton = () => {
const { openSignIn } = useSlashAuth();
return <button onClick={() => openSignIn()}>Login</button>;
};
You now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the
LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.The SlashAuth SDK exposes information about the current user and their logged in status via data returned by the
useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component:// file:LoginStatus.tsx
import { useSlashAuth } from '@slashauth/slashauth-react';
export const LoginStatus = () => {
const { account, connectedWallet, isAuthenticated } = useSlashAuth();
return (
<div>
<div style={{ display: 'block' }}>
<div>Account: {account?.sub}</div>
<div>Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}</div>
{connectedWallet && <div>Wallet address: {connectedWallet}</div>}
<div>Is Logged In? {isAuthenticated ? 'Yes' : 'No'}</div>
</div>
</div>
);
};
The SlashAuth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.
// file:LogoutButton.tsx
import { useSlashAuth } from "@slashauth/slashauth-react";
export const LogoutButton = () => {
const { logout } = useSlashAuth();
return <button onClick={() => logout()}>Logout</button>;
};
A simple way to see this all work together is updating your app's entry point to display this information.
// file:App.tsx
import { useSlashAuth } from '@slashauth/slashauth-react';
import { LoginStatus } from './LoginStatus';
import { LoginButton } from './LoginButton';
import { LogoutButton } from './LogoutButton';
function App() {
const { isAuthenticated } = useSlashAuth();
return (
<div>
{isAuthenticated ? <LogoutButton /> : <LoginButton />}
<LoginStatus />
</div>
);
}
export default App;
Congratulations! You've successfully integrated with SlashAuth.
Example of a logged in user.
Last modified 11mo ago