Comment on page
Frontend Token Gating
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
);
root.render(
<SlashAuthProvider clientID={/* YOUR_CLIENT_ID */}>
<App />
</SlashAuthProvider>
);
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.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.Last modified 11mo ago