Comment on page

Frontend Token Gating

Before continuing on to this page, make sure you have followed the previous steps in Token Gating.

Write the code

Configure SlashAuthProvider

Similar to the Quickstart guide, we will configure the SlashAuthProvider with this client ID.
// 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
<SlashAuthProvider clientID={/* YOUR_CLIENT_ID */}>
<App />
Everything else is the same as the Guide. Try it out -- logging in with any wallet will still work, however note that the Has Role section will return false unless you hold an ENS address.

Test It Out

You can use the useHasRole hook to check if a user has a role.
import React from 'react';
import { useHasRole } from '@slashauth/slashauth-react';
export const HasRole = () => {
const { hasRole, loading } = useHasRole('Member');
if (loading) {
return null;
return <div>{`Has role? ${hasRole}`}</div>;
Change the ENS Token Holder string to some other role name and try logging in again. Note that now the response from hasRole is false. This is how you can detect authorization for your users.