Netlify Identity + React Hooks, with Typescript
Use Netlify Identity easier with React! This is a thin wrapper over the gotrue-js library for easily accessing Netlify Identity functionality in your app, with React Hooks. Types are provided.
Two demos:
- a full demo here with source code
- the
examplefolder here has a demo hosted here with deploy logs here
This library is not officially maintained by Netlify. This is written by swyx for his own use (and others with like minds 😎) and will be maintained as a personal project unless formally adopted by Netlify. See below for official alternatives.
Lowest level JS Library: If you want to use the official Javascript bindings to GoTrue, Netlify's underlying Identity service written in Go, use https://github.com/netlify/gotrue-js
React bindings: If you want a thin wrapper over Gotrue-js for React, react-netlify-identity is a "headless" library, meaning there is no UI exported and you will write your own UI to work with the authentication. https://github.com/sw-yx/react-netlify-identity. If you want a drop-in UI, there is yet another library that wraps react-netlify-identity: https://github.com/sw-yx/react-netlify-identity-widget
High level overlay: If you want a "widget" overlay that gives you a nice UI out of the box, with a somewhat larger bundle, check https://github.com/netlify/netlify-identity-widget
High level popup: If you want a popup window approach also with a nice UI out of the box, and don't mind the popup flow, check https://github.com/netlify/netlify-auth-providers
Library is written in Typescript. File an issue if you find any problems.
yarn add react-netlify-identityhttps://mysite.netlify.com) to initialize useNetlifyIdentity.
As a React Hook, you can destructure these variables and methods:
user: UsersetUser: directly set the user object. Not advised; use carefully!! mostly you should use the methods belowisConfirmedUser: boolean: if they have confirmed their emailisLoggedIn: boolean: if the user is logged insignupUser(email: string, password: string, data: Object)loginUser(email: string, password: string, remember: Boolean)- we default therememberterm totruesince you'll usually want to remember the session in localStorage. set it to false if you need tologoutUser()requestPasswordRecovery(email: string)recoverAccount(token: string, remember?: boolean | undefined)updateUser(fields: Object)getFreshJWT()authedFetch(endpoint: string, obj = {})(a thin axios-like wrapper overfetchthat has the user's JWT attached, for convenience pinging Netlify Functions with Netlify Identity)
import * as React from "react"
import { useNetlifyIdentity } from "react-netlify-identity"
const IdentityContext = React.createContext() // not necessary but recommended
function App() {
const identity = useNetlifyIdentity(url) // supply the url of your Netlify site instance. VERY IMPORTANT
return <IdentityContext.Provider value={identity}>{/* rest of your app */}</IdentityContext.Provider>
}// log in/sign up example
function Login() {
const { loginUser, signupUser } = React.useContext(IdentityContext)
const formRef = React.useRef()
const [msg, setMsg] = React.useState("")
const signup = () => {
const email = formRef.current.email.value
const password = formRef.current.password.value
signupUser(email, password)
.then((user) => {
console.log("Success! Signed up", user)
navigate("/dashboard")
})
.catch((err) => console.error(err) || setMsg("Error: " + err.message))
}
return (
<form
ref={formRef}
onSubmit={(e) => {
e.preventDefault()
const email = e.target.email.value
const password = e.target.password.value
load(loginUser(email, password, true))
.then((user) => {
console.log("Success! Logged in", user)
navigate("/dashboard")
})
.catch((err) => console.error(err) || setMsg("Error: " + err.message))
}}
>
<div>
<label>
Email:
<input type="email" name="email" />
</label>
</div>
<div>
<label>
Password:
<input type="password" name="password" />
</label>
</div>
<div>
<input type="submit" value="Log in" />
<button onClick={signup}>Sign Up </button>
{msg && <pre>{msg}</pre>}
</div>
</form>
)
}
// log out user
function Logout() {
const { logoutUser } = React.useContext(IdentityContext)
return <button onClick={logoutUser}>You are signed in. Log Out</button>
}
// check `identity.user` in a protected route
function PrivateRoute(props) {
const identity = React.useContext(IdentityContext)
let { as: Comp, ...rest } = props
return identity.user ? (
<Comp {...rest} />
) : (
<div>
<h3>You are trying to view a protected page. Please log in</h3>
<Login />
</div>
)
}
// check if user has confirmed their email
// use authedFetch API to make a request to Netlify Function with the user's JWT token,
// letting your function use the `user` object
function Dashboard() {
const { isConfirmedUser, authedFetch } = React.useContext(IdentityContext)
const [msg, setMsg] = React.useState("Click to load something")
const handler = () => {
authedFetch.get("/.netlify/functions/authEndPoint").then(setMsg)
}
return (
<div>
<h3>This is a Protected Dashboard!</h3>
{!isConfirmedUser && (
<pre style={{ backgroundColor: "papayawhip" }}>
You have not confirmed your email. Please confirm it before you ping the API.
</pre>
)}
<hr />
<div>
<p>You can try pinging our authenticated API here.</p>
<p>If you are logged in, you should be able to see a `user` info here.</p>
<button onClick={handler}>Ping authenticated API</button>
<pre>{JSON.stringify(msg, null, 2)}</pre>
</div>
</div>
)
}MIT © sw-yx