react-use-credential-management
React hook to leverage Credential Management API
Usage
Wrap your <App/>
with AuthProvider
:
The authenticate
prop must be an async function taking a PasswordCredentialData
as first argument, and returning a complete user profile. Use it to fetch icon URL and full name from backend. Example:
Where id
is whatever unique value you choose to identify users, be it email, username, or anything else. It will be used to retrieve unique user information from your database.
Login button
Use login
to try stored credentials. Pass 'silent'
to prevent asking the user for permission, 'optional'
to optionally ask for consent if needed (otherwise, behaves as 'silent'
), and 'required'
to unconditionally ask for consent.
if isLoading return button onClick=Login</button>
Use logout
to require user consent next login:
if isLoading return button onClick=Login</button>
Use isAuthenticated
to check if user is already logged in. You can leverage it to select between login and logout buttons:
if isLoading return isAuthenticated ? button onClick=Login</button> : button onClick=Login</button>
Use signup
to create new credentials:
if isLoading return form onSubmit= p label spanUsername:/span input name="id" autoComplete="username" required / /label /p p label spanPassword:/span input name="password" type="password" autoComplete="current-password" required / /label /p button type="submit"Submit</button> /form
Complete example:
if isLoading return isAuthenticated ? button onClick=Logout</button> : isFormOpen ? form onSubmit= p label spanUsername:/span input name="id" autoComplete="username" required / /label /p p label spanPassword:/span input name="password" type="password" autoComplete="current-password" required / /label /p button type="submit"Submit</button> /form : button onClick=Login</button>
License
This project is licensed under the MIT License - see LICENSE for details.