This is a custom hook library where you can authenticate your user on the client side of Next.js with embedded login. It is based on the all client side library auth0.js build by Auth0.
- Auth0 claims using embedded login will increase security vulnerabilities, so they only push universal login and would not recommend using embedded login.
- Auth0 provide us with the SDK nextjs-auth0 for Next.js - Auth0 authentication, some would suggest using an auth0 spa library, however they only support universal login.
- This library will enable you to authenticate user on client with embedded login, where you can customize and create a more seamless UX/UI for your website needs.
Documentation - Getting Started - API Reference - Feedback
- Options Basic configurations for Auth0
- Types Types of each functions, configs and options.
- Examples - code samples for common auth0-js authentication scenario's.
From npm:
npm install auth0-nextjs-embeddedAfter installing the auth0-nextjs-embedded module using npm, you'll need to import the exposed hook useAuth0:
import { useAuth0 } from 'auth0-nextjs-embedded';initialize configuration for useAuth0 with your Auth0 basic information
const { user } = useAuth0({
domain: '{YOUR_AUTH0_DOMAIN}',
clientID: '{YOUR_AUTH0_CLIENT_ID}'
...
});Auth0Hook: Describes the Auth0Hook interface comprehensively, detailing its properties (isAuthenticated, user, isLoading, error) and methods (signupAndAuthorize, login, loginWithSocialProvider, logout, parseHash, passwordReset, revalidate, checkSession).
Many of the types and options are extended from the auth0.js library. Please check it with their documentations for detailed options.
| Type / Interface | Description |
|---|---|
Auth0Error |
Error object used for Auth0-related errors. |
Auth0UserProfile |
User profile object returned by Auth0 after authentication. |
AuthOptions |
Options object used for configuring Auth0 authentication. |
ChangePasswordOptions |
Options object for changing the user's password. |
CheckSessionOptions |
Options object for checking the session status with Auth0. |
DbSignUpOptions |
Options object for signing up a new user using a database connection in Auth0. |
LoginOptions |
Options object for logging in a user. |
LogoutOptions |
Options object for logging out a user. |
ParseHashOptions |
Options object for parsing the hash after authentication. |
Auth0User |
Interface representing an Auth0 user profile. Extends Auth0UserProfile. |
Auth0Config |
Interface representing Auth0 configuration options. Extends AuthOptions. |
Auth0Hook |
Interface representing a hook for Auth0 authentication management. Includes: - isAuthenticated: Boolean indicating if user is authenticated. - user: Current user profile (Auth0User or null). - isLoading: Boolean indicating if authentication operations are in progress. - error: Auth0 error object (Auth0Error or null). - Methods for authentication operations: - signupAndAuthorize(signUpForm: DbSignUpOptions): Sign up and authorize a user. - login(loginForm: LoginOptions): Log in a user. - loginWithSocialProvider(provider: Auth0SocialProvider): Log in with a social provider (Auth0SocialProvider). - logout(logoutOptions: LogoutOptions): Log out a user. - parseHash(hashOptions: ParseHashOptions): Parse authentication hash. - passwordReset(resetForm: ChangePasswordOptions): Reset user's password. - revalidate(checkSessionForm: CheckSessionOptions): Revalidate session. - checkSession(checkSessionForm: CheckSessionOptions): Check session status. |
Auth0SocialProvider |
Type representing supported social providers for Auth0 authentication: "google-oauth2", "linkedin". |
More features are coming to encapsulte the auth0.js library from Auth0 for embedded login.
I welcome and appreciate feedback and contribution to this repo!
To provide feedback or report a bug, please raise an issue on our issue tracker.
