See the Gatsby-integrated Demo! ✨ https://gatsby-identity-demo.jonsully.net ✨
See the demo code 🤖 here! 🤖
Welcome to the fully-featured, easy to use Netlify Identity integration for React, built purely in React without any dependencies.
npm i react-netlify-identity-gotrue
# or
yarn add react-netlify-identity-gotrue
This package exports NetlifyIdentityContext
, which must be instantiated at the upper-most part of the React tree that you wish to contain identity services below (the root of the site, in most cases). While there is a Gatsby port of this package that provides out-of-the-box Gatsby bindings for setting up the root React-tree provider, if you're using another framework or pure react, you'll need to do this yourself. For something like Next.js, following the 'Custom App' system, this looks like:
// ./pages/_app.js -- How to wrap a Next.js app with a Provider
import App from 'next/app'
import React from 'react'
import NetlifyIdentityContext from 'react-netlify-identity-gotrue'
export default class NetlifyIdentityApp extends App {
render() {
const { Component, pageProps } = this.props
return (
<NetlifyIdentityContext url={'https://nextjs-identity-demo.jonsully.net'}>
<Component {...pageProps} />
</NetlifyIdentityContext>
)
}
}
❗NOTE:❗️NetlifyIdentityContext
requires a url
be passed in. This URL should contain no path (/.netlify/identity
etc..) and no trailing slash. Netlify Identity must be enabled on the site URL given. If Identity is not enabled, this package will fail. Make sure it's turned on 🙂
Once you have the NetlifyIdentityContext
correctly wrapping your React tree, you should be all set to begin using useIdentityContext
! Read on!
By installing the Context at the root of your site (above), you can leverage the identity
object anywhere in your site. It looks like this:
// pages/my-account.js
import React from 'react'
import { useIdentityContext } from 'react-netlify-identity-gotrue'
export default () => {
const identity = useIdentityContext()
return {
identity.user
? <p>Welcome to your account, {identity.user.email}</p>
: <p>Please log in</p>
}
}
The identity
object consists of a few key functions and values:
Returns: object
or undefined
When a user is logged in, the user
object gives all of the information about that current user. When logged out, this objet is undefined
, making ternary and conditional blocks in your application code simple: if (identity.user) doThing()
. This object typically contains a wealth of information. Taken from a test user on the demo site, here's an example of the user
object's fields and values:
{
"id": "1c3abcb6-4aac-a060-1feq1g42ed19",
"aud": "",
"role": "",
"email": "[email protected]",
"confirmed_at": "2020-12-27T21:26:38Z",
"confirmation_sent_at": "2020-12-27T21:26:28Z",
"app_metadata": {
"provider": "email",
"roles": [
"member",
"dog-owner"
]
},
"user_metadata": {
"address": {
"city": "Testertown",
"state": "CA",
"street": "123 Test Avenue",
"zip": "95056"
},
"full_name": "Test Person",
"phone_number": "800-888-4422"
},
"created_at": "2020-12-27T21:26:28Z",
"updated_at": "2020-12-27T21:26:28Z"
}
As we can see, plenty of data to pull from. As a note of caution, it's always a good idea to leverage optional chaining when writing code to access the user
object. This provides an error-mitigation mechanism for the rare cases where a user reaches your component without being logged in or the particular user doesn't have the specified field set on their specific user
.
Example usage:
Constructing a greeting string:
const greeting = `Hey ${identity.user?.user_metadata?.full_name || 'there'}!`
Returns: undefined
Ultimately a function that would probably be called in your submit
handler on your login form (the demo does exactly this), this function receives an object with an email
and password
key as arguments and logs the user in (any/all other arguments passed are ignored). This function returns no values, but can throw a standard Error if the logging-in-user isn't found, credentials are wrong, or other rare cases. These errors can be caught and displayed as needed (demo example).
The critical workflow step involved here is that .login()
sets up and populates the .user
object. So any useEffect
s or other rendering occurring in your site that relies on or uses the .user
object will automatically re-render with the user logged in after .login()
completes. This behavior aids in the 'it just works' mentality.
Example usage:
Handling a login-form submit:
// Login form partial example - using a managed-state form approach
const [userEmail, setUserEmail] = useState()
const [userPassword, setUserPassword] = useState()
const [formError, setFormError] = useState()
const submitHandler = async e => {
e.preventDefault()
await identity.login({
email: userEmail,
password: userPassword
})
.then(() => navigate('/my-account'))
.catch(e => setFormError(e.message))
}
Demo site reference: https://github.com/jon-sully/gatsby-plugin-netlify-identity-gotrue-demo/blob/master/src/components/LoginForm.jsx (using react-hook-form
)
Returns: undefined
A somewhat simple function, likely bound to a 'logout' button directly, this method removes all instances of a local user and reverts the React app back to a logged-out state with no remnants of the prior user.
Example usage:
A typical logout button:
{identity.user &&
<button onClick={identity.logout}>
Log Out
</button>
}
Demo site reference: https://github.com/jon-sully/gatsby-plugin-netlify-identity-gotrue-demo/blob/master/src/components/Layout.js#L38
Returns: undefined
The .update()
function is the primary mechanism for updating a user's data. Similar to .login()
, this function receives an object with email
and password
keys but also supports the user_metadata
key. Any of the keys may be omitted or included and only the values that differ from what's already saved for the user will change (e.g. if you include email
every time but it's the same email on file, it's a no-op).
Updating the user's email address requires passing the user's new / desired email address in under the email
key. Once the email-change request has been made, the identity.pendingEmailUpdate
will update to reflect the user's desired email, but the user.email
will not immediately be the users new email. This is due to the email-confirmation process required by Netlify Identity. Upon submitting a request for an email-change (that is, running .update()
with a different email
value specified than what's currently saved for that user), a confirmation email is sent to the new email containing a link. The user must click that link (which should lead back to the site with a confirmation token in the URL) to confirm the new email address. When react-netlify-identity-gotrue
's Context is running at the root of the app (identity available on all pages), the email-confirmation token will be automatically parsed, processed, and confirmed. Application developers in the meantime can leverage the identity.pendingEmailUpdate
value (as described below) to display to users that there's a pending email change and they need to check their email.
Updating the user's password
is as simple as calling this function an passing the new password
value in under the password
key. There is no necessary second-step or confirmation, or is there a secondPassword
validation key of any sort. Any "type it twice to make sure you get it right" sort of functionality needs to be configured at the Application level - this library presumes that what's passed in the password
key is indeed the correct, known new password for the user. It will be updated immediately.
Updating the user's user_metadata
is far less bound by process but does contain diff'ing logic that should be noted. Updates to user_metadata
replace all data from the top-level (user_metadata
) key down. To put that into the context of a real example, consider a test user that currently has user_metadata
such as:
user = {
"email": "[email protected]",
"app_metadata": {
"etc": "etc"
},
"etc": "etc",
"user_metadata": {
"address": {
"city": "Testertown",
"state": "CA",
"street": "123 Test Avenue",
"zip": "95056"
},
"full_name": "Test Person",
"phone_number": "800-888-4422"
},
}
If I submit an .update()
to that user with arguments such as .update({ user_metadata: { address: { street: "44 Example Way" } } })
, the result would look like:
user = {
"email": "[email protected]",
"app_metadata": {
"etc": "etc"
},
"etc": "etc",
"user_metadata": {
"address": {
"street": "44 Example Way"
},
"full_name": "Test Person",
"phone_number": "800-888-4422"
},
}
The takeaway here being that the previous user.user_metadata.address.city
and .state
and .zip
were removed, because an update was made to the top-level user_metadata
key, address
, and the update didn't include those tertiary fields. To contrast that, note that my update didn't change the data under user.user_metadata.full_name
or phone_number
. Since those are separate top-level fields in user_metadata
, they're un-impacted and retained unless explicitly specified in the update. (source)
The point here being that we need to be careful about data contained within / nested under a top-level key inside of user_metadata
- in order to retain that data, it needs to be sent back with the top-level key in the update.
The demo follows what I would recommend: just send all the fields in each update. That lowers the risk of any data mishaps and ensures that everything is up to date!
NOTE: If you ever need to outright remove a top-level user_metadata
key from a user, just update it with the value set to null
.
Example usage:
Updating password: Note that the 'enter it twice for security' logic is purely on the front-end and the identity API itself doesn't require it, passing only a single instance of password
// Update form partial example - using a managed-state form approach
const [userPassword, setUserPassword] = useState()
const [userPasswordAgain, setUserPasswordAgain] = useState()
const [formMessage, setFormMessage] = useState()
const submitHandler = async e => {
e.preventDefault()
if (userPassword === userPasswordAgain) {
await identity.update({
password: userPasswordAgain
})
.then(() => setFormMessage('Updated!'))
.catch(e => setFormError(e.message))
}
}
Updating email:
// Update form partial example - using a managed-state form approach
const [newUserEmail, setNewUserEmail] = useState()
const [formMessage, setFormMessage] = useState()
const submitHandler = async e => {
e.preventDefault()
await identity.update({
email: newUserEmail
})
.then(() => setFormMessage('Please check your email to confirm'))
.catch(e => setFormError(e.message))
}
Updating metadata:
// Update form partial example - using a managed-state form approach
const [userFullName, setUserFullName] = useState()
const [userPhoneNumber, setUserPhoneNumber] = useState()
const [formMessage, setFormMessage] = useState()
const submitHandler = async e => {
e.preventDefault()
await identity.update({
user_metadata: {
full_name: userFullName,
phone_number: userPhoneNumber
}
})
.then(() => setFormMessage('Saved!'))
.catch(e => setFormError(e.message))
}
Demo site reference: https://github.com/jon-sully/gatsby-plugin-netlify-identity-gotrue-demo/blob/master/src/pages/my-account.js#L27
Returns: undefined
This function sets up the initial sign-up functionality for the identity interface, allowing the user to submit their email
and password
for the new account, but also to submit any tertiary user_metadata
as needed per the Application developer's needs.
If the site has auto-confirm disabled (default), a successful signup will populate identity.provisionalUser
but will not populate identity.user
(since a Netlify Identity user is not able to execute authorized calls and/or login until they confirm their email).
If the site has auto-confirm enabled, a successful signup will log the user in to a fully authenticated session and the user will accessible via identity.user
.
Auto-confirm settings can be configured under the "Confirmation Template" section of
https://app.netlify.com/sites/<YOUR-SITE-SLUG>/settings/identity#confirmation-template
e.g. https://app.netlify.com/sites/flying-banana-12c2b/settings/identity#confirmation-template
Example usage:
Sign-up Form:
// Signup form partial example - using a managed-state form approach
const [password, setPassword] = useState()
const [email, setEmail] = useState()
const [fullName, setFullName] = useState()
const [formMessage, setFormMessage] = useState()
const submitHandler = async e => {
e.preventDefault()
await identity.signup({
password,
email,
user_metadata: {
full_name: fullName
}
})
.then(() => setFormMessage('Please check your email to confirm your account!'))
.catch(e => setFormError(e.message))
}
Demo site reference: https://github.com/jon-sully/gatsby-plugin-netlify-identity-gotrue-demo/blob/master/src/pages/sign-up.js#L17
Returns: object
or undefined
The identity.urlToken
is a flag, more than anything. When there is a urlToken
, the goal is to check the urlToken.type
and change your display accordingly. This is well displayed in the demo app via the AuthOverlay.jsx
component.
The presence of a urlToken
means one of two things:
-
It's there to act as a flag so that the Application UI can trigger a spinner or waiting overlay for the brief period of time that
react-netlify-identity-gotrue
is processing in the background (e.g. while the library automatically confirms a user after clicking the "confirm" email link) -
It's there to act as a flag to tell the Application that we need more information from the user before moving forward.
Here are the options for what the urlToken.type
can be and what they mean:
urlToken.type === 'confirmation'
- When this token type is present, the token is simply acting as a flag for the Application to show a spinner or loading animation briefly. There's no extra step needed to be taken. The spinner / loading animation simply covers the brief (typically less than 1 second) time between when the user loads the page and when this library has automatically confirmed the user and logged the user into a full session. Yay for automatic things!
urlToken.type === 'invite'
- When the
invite
token type is present, the two-step process is required. When a user is invited to create an account on the site from the Netlify Admin, only the email address for that user is taken. So when the user comes to the site and this library becomes aware of the invite, the user needs to enter their desiredpassword
and any otheruser_metadata
the Application is looking to create on the user account. The second step is callingidentity.completeUrlTokenTwoStep({ password, user_metadata: { } })
with that data, as described further below. Once thecompleteUrlTokenTwoStep()
function completes, the user will be fully logged in to their account. - In the demo site we leverage a transparent (forced) overlay and render a small form to take the additional information, then call
completeUrlTokenTwoStep()
to complete the invitation process!
- When the
urlToken.type === 'email_change'
- The
email_change
token type may either be automatic (and thus just a flag to render a spinner similar to theconfirmation
type) or may require a second step - depending on whether or not there's already a user logged (whether or notidentity.user
is 'truthy'). Theemail_change
workflow requires that the user be actively logged in (using their prior email address) before the change can be confirmed. So, the onus is on the Application to determine if there's anemail_change
token and whether or notidentity.user
is true; if it is, the process is running automatically; if it's not, the Application must log the user in before theemail_change
can complete. - While it may sound tedious, this is a fairly straightforward double-conditional that the demo site displays easier than reading it here. You are recommended to check that link and read through some of the mark up in the
AuthOverlay
component.
- The
urlToken.type === 'passwordRecovery'
- Similarly to the
invite
token, thepasswordRecovery
token warrants a two-step process. Luckily, this token type need only complete the process with a newpassword
rather than having to worry about additionaluser_metadata
as well. Once again, this token being present is the flag to tell the Application that additional data is needed from the user, and the onus is upon the Application to render a 'new password' form, get the input from the user, and callidentity.completeUrlTokenTwoStep({ password })
to complete the process. - Once again, the demo site is the best view into this process workflow and illustration.
- Similarly to the
Example usage:
Since there are many cases of the urlToken
and the workflow it requires, we'll defer example usages to the AuthOverlay.jsx
component in the demo site.
Returns: undefined
This method is a utility to forcibly refresh the local user's information and authorization. While not ostensibly the most useful functionality, it presents a particular use case for when you know a user's data has been altered externally. This typically isn't the case - a user's own identity.user
data tends to only be changed by that user but if the user kicks off a process that externally alters the user data, this method can be useful.
The demo site exhibits this use-case for clarity - when clicking the "Make me a member!" or "Make me an admin!" buttons, the Netlify Function that runs behind the scenes makes a change to the user
data - it adds or removes role(s). Since we know that's what's happening, we can use .refreshUser()
once the button execution has completed in order to refresh the user and pull down the new role(s).
In cases where the Application / front-end code doesn't kick off an action that we know will change the user
data, but rather a change is made to the use data in an ad-hoc format (e.g. adding a Role from the Netlify Admin UI), instructing users to log out then back in will pull down the latest data.
Example usage:
From the demo site's use case described above, where we kick off a Function we know will ultimately alter the user
data on the server:
const updateRoles = ({ add, remove }) => {
setProcessing(true)
identity.authorizedFetch('/api/update-role', {
method: 'POST',
body: JSON.stringify({
action: add ? 'add' : 'remove',
role: add || remove
})
})
.then(identity.refreshUser)
}
Returns: Promise<Response>
Another utility function, the authorizedFetch
is a simple wrapper around the native fetch()
function that injects the Authorization
header into the fetch()
for use with Netlify Functions. Since this method is just a thin wrapper around fetch()
, it should be treated just like fetch()
, using .then(response => response.json()).then(object => etc.)
and any other typical usages you might expect.
For more information on Netlify Identity + Netlify Functions I recommend reading this post about how Netlify Functions work with "Authentication Functions" and this initial documentation from Netlify on the matter. The gist of it is that any time an AuthorizedFetch is placed to any Function running on a site that has Netlify Identity enabled, the Function validates that the incoming request was made with a valid JWT (checks the signed cryptographic signature) then makes data available inside the Function pertaining to who made the request (the user details). The functions are also automatically granted a short-lived "super-admin" token that allows them to make admin-level changes to the Netlify Identity instance if need-be (similar to the abilities available when in the Netlify Admin UI.. deleting users, creating users, changing roles, etc.). This is how the update-role
Function in the demo site is powered.
Example usage:
Hitting a Function that returns a token of some sort:
identity.authorizedFetch('/api/update-role', {
method: 'POST',
body: JSON.stringify({
action: add ? 'add' : 'remove',
role: add || remove
})
})
.then(resp => resp.json())
.then(token => console.log(token.status))
Returns: object
or undefined
As described in identity.signup()
above, the provisionalUser
object is only ever set when a new user has signed up for an account on the site and auto-confirm is disabled. This user is considered un-confirmed until they click the confirmation email that was sent, but until then, the user information is temporarily stored in the identity.provisionalUser
object.
❗Do note that this object is not persisted, unlike the identity.user
! Once a user signs up, this object will be present, but if they refresh the page, the provisionalUser
will once again be undefined
and similar to as if they never signed up in the first place (until they click the link in their confirmation email) - so it's advised that the Application urge the user to click the link in their email as soon as possible. Alternatively, the site may enable auto-confirm so that all new sign-ups are automatically created as full user accounts rather than having a provisional stage in the middle.
Example usage:
// Signup form partial example - using a managed-state form approach
const [password, setPassword] = useState()
const [email, setEmail] = useState()
const [fullName, setFullName] = useState()
const [formMessage, setFormMessage] = useState()
// Assuming auto-confirm disabled
const submitHandler = async e => {
e.preventDefault()
await identity.signup({
password,
email,
user_metadata: {
full_name: fullName
}
})
.then(() => setFormMessage('Please check your email to confirm your account!'))
.catch(e => setFormError(e.message))
}
useEffect(() => {
if (identity.provisionalUser) {
console.log(`Provisional user now set: ${identity.provisionalUser.email}`)
}
}, [identity.provisionalUser])
Returns: string
or undefined
The pendingEmailUpdate
value is a utility for quickly assessing whether the current user has a pending email change, and the string returned is the 'new' email address waiting to be confirmed. This allows for simple shorthand like {identity.pendingEmailUpdate && <p>Pending email update to {identity.pendingEmailUpdate}</p>}
.
It should be noted that even if the user has a pending email change, they may still submit another subsequent .update({ email: '[email protected]' })
to re-generate the confirmation email to the new email address. Similarly, even if they have a pending update request, they can submit another subsequent update to change the email to a different new email address. In either of these cases, only the most recent email_change
confirmation email will be valid. Prior emails containing 'old' URLs will not process.
These two methods can be combined to setup a quick "resend email confirmation" button that re-runs an .update
with the .pendingEmailUpdate
. See the following example
Example usage:
Taken from the demo app for a re-send confirmation workflow:
const reSendEmailChangeConfirmation = async () => {
if (!identity.pendingEmailUpdate || formProcessing) return
setFormProcessing(true)
await identity.update({ email: identity.pendingEmailUpdate })
setFormProcessing(false)
setFormSubmitted(true)
setTimeout(() => (setFormSubmitted(false)), 2000)
}
Returns: undefined
A simple async function (capable of await
ing or then
-ing) that kicks off a password recovery email for the specified user-email, if such a user exists on the site. Presumably no user would be logged in while running this method, but the method is technically agnostic of any user currently being logged in and runs without impact to the current state of identity
Example usage:
// Password reset form partial example - using a managed-state form approach
const [email, setEmail] = useState()
const [formMessage, setFormMessage] = useState()
const submitHandler = async e => {
e.preventDefault()
await identity.sendPasswordRecovery({
email
})
.then(() => setFormMessage('Please check your email for a password recovery link'))
.catch(e => setFormError(e.message))
}
Returns: undefined
As described above in the urlToken
section, the completeUrltokenTwoStep
method is specifically used to complete the two-step process of setting up a new user after they've been invited to join the site (sent an invitation email) or when the user is executing a password recovery sequence. In both cases, the identity.urlToken
will be set and identity.urlToken.type
will be equal to either invite
or passwordRecovery
(respectively). Once the Application has gathered the necessary additional information from the user, the Application needs to call this method and pass in the additional information to complete the two-step process.
For the invite
token, the additional information required is the new user's desired account password and optional additional information is any user_metadata
the Application would like to store for that user (full name, address, etc.) - typically the password and additional information are collected in the same "invitation signup" form (as we do in the demo)
For the passwordRecovery
token, the only additional information required is the new password
for the user. Once the application has allowed the user to select a new password, it should be passed into the completeUrltokenTwoStep
method.
Once the completeUrltokenTwoStep()
method has been called, the rest of the user account processing is automatic. In both cases, the result will be a full user account session with identity.user
populated and set correctly.
Example usage:
As this two-step workflow is a bit more than can be fit into a README code block, it's encouraged to read through the AuthOverlay.jsx
component from the demo site.
A comprehensive demo was built using this package in a Gatsby application (a Next.js-based clone will be on the way soon) - it uses the same identity
API as described above, the Gatsby port just automates the installation of the React Context wrapping the React tree.
The demo utilizes the identity
API above extensively and presents a fully implemented Auth'd website. It's strongly recommended to look through the React code behind the demo for a better picture of how to leverage the identity
API above.
The demo can be found here: https://gatsby-identity-demo.jonsully.net
The demo source code is here: https://github.com/jon-sully/gatsby-plugin-netlify-identity-gotrue-demo
This repository, the Gatsby-specific wrapper (to provide React Context bindings at the React tree root) gatsby-plugin-netlify-identity-gotrue
, and the gatsby-plugin-netlify-identity-gotrue-demo
repository (demo site) that consumes the Gatsby-specific wrapper are not related to Netlify's netlify-identity-widget
stack or @sw-yx's react-netlify-identity
stack, both of which ultimately sit on gotrue-js
. This stack is written in pure React and interfaces with Netlify Identity directly without any dependencies. You can read some history about the three stacks here: https://jonsully.net/blog/announcing-react-netlify-identity-gotrue.