netlify-labs / react-netlify-identity-widget

a small (6kb) drop-in accessible authentication widget for your React apps. SEEKING MAINTAINERS

SEEKING MAINTAINERS

i've left Netlify. obviously i still care about netlify but im gonna have other stuff to do and wont be able to give this my full attention. pls open an issue if you use this and want to take over. post your npm username too. i'd love to find a good home for this project.

React Netlify Identity Widget

The easiest way to use Netlify Identity with React, no login UI coding required!

This is a React port of https://github.com/netlify/netlify-identity-widget (48kb), taking the lightweight functionality of https://github.com/sw-yx/react-netlify-identity (4kb) and adding back the nicer UI with a focus on accessibility (with @reach UI) and bundle size (only 6kb as of writing).

demo

the demo is hosted at: https://react-netlify-identity-widget.netlify.com (you can see the deploy logs here)

and the source is in /examples.

Usage

we require some peer dependencies:

yarn add react-netlify-identity react-netlify-identity-widget @reach/dialog @reach/tabs @reach/visually-hidden

and the styles are optional but provided. here's how to use IdentityModal, useIdentityContext, IdentityContextProvider:

import React from 'react'
import './App.css'
import { IdentityModal, useIdentityContext, IdentityContextProvider } from 'react-netlify-identity-widget'
import 'react-netlify-identity-widget/styles.css'
import "@reach/tabs/styles.css"

function App() {
  const url = process.env.REACT_APP_NETLIFY_IDENTITY_URL || 'url here for running locally' // should look something like "https://foo.netlify.com"
  if (!url)
    throw new Error(
      'process.env.REACT_APP_NETLIFY_IDENTITY_URL is blank2, which means you probably forgot to set it in your Netlify environment variables',
    )
  return (
    <IdentityContextProvider url={url}>
      <AuthStatusView />
    </IdentityContextProvider>
  )
}

// // code split the modal til you need it!
// const IdentityModal = React.lazy(() => import('react-netlify-identity-widget'))

function AuthStatusView() {
  const identity = useIdentityContext()
  const [dialog, setDialog] = React.useState(false)
  const name =
    (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.full_name) || 'NoName'
  const avatar_url = identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.avatar_url
  return (
    <div className="App">
      <header className="App-header">
        {identity && identity.isLoggedIn ? (
          <>
            <h1> hello {name}!</h1>
            {avatar_url && <img alt="user name" src={avatar_url} style={{ height: 100, borderRadius: '50%' }} />}
            <button className="btn" style={{ maxWidth: 400, background: 'orangered' }} onClick={() => setDialog(true)}>
              LOG OUT
            </button>
          </>
        ) : (
            <>
              <h1> hello! try logging in! </h1>
              <button className="btn" style={{ maxWidth: 400, background: 'darkgreen' }} onClick={() => setDialog(true)}>
                LOG IN
            </button>
            </>
          )}

        <IdentityModal
          showDialog={dialog}
          onCloseDialog={() => setDialog(false)}
          onLogin={(user) => console.log('hello ', user?.user_metadata)}
          onSignup={(user) => console.log('welcome ', user?.user_metadata)}
          onLogout={() => console.log('bye ', name)}
        />

        <h3>
          Or{' '}
          <a
            href="https://github.com/sw-yx/react-netlify-identity-widget"
            target="_blank"
            rel="noopener noreferrer"
            style={{ color: 'powderblue' }}
          >
            view the source
          </a>
        </h3>
      </header>
    </div>
  )
}
export default App

You may also code split the Modal if you wish with React.lazy and React.Suspense.

Blogposts

• Add Netlify Identity Authentication to any React App in 5 minutes with React Context, Hooks and Suspense

Gatsby plugin

You may get a little help configuring RNIW for usage with Gatsby by using https://github.com/sw-yx/gatsby-plugin-netlify-identity. Read its README for more info.

local dev

yarn
yarn build
yarn link
cd example
yarn && yarn link "react-netlify-identity"
yarn start # to see the example run

tsdx bug

we use https://github.com/ds300/patch-package to patch this bug jaredpalmer/tsdx#36

List of 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

react-netlify-identity-widget's Issues

Local dev

Hi

I'm using this on a project I'm working on and seeing "Forgot password" was missing I wanted to add that. But, how do I run the repo locally? I went through this https://github.com/sw-yx/react-netlify-identity-widget#local-dev but it only runs the example site which uses the public package so I can't test my changes...

Hope this make sense.

SEEKING MAINTAINERS

SEEKING MAINTAINERS

i've left Netlify. obviously i still care about netlify but im gonna have other stuff to do and wont be able to give this my full attention. pls open an issue if you use this and want to take over. post your npm username too. i'd love to find a good home for this project.

Bump react-netlify-identity to version "^0.2.2",

You have updated "react-netlify-identity" to version "^0.2.2", could you change that here please.

Instructions do not add react-netlify-identity

Instructions do not add react-netlify-identity and it will pop up the modal and provide context but will not login without it.

should it not be

yarn add react-netlify-identity react-netlify-identity-widget @reach/dialog @reach/tabs @reach/visually-hidden
and then it add's the updated @reach/dialog @reach/tabs @reach/visually-hidden and you get a npm warring
EDIT:
Did not need gatsby netlify plugin, My context URl is set globally in ssr and browser

`
import React from 'react'
import { IdentityContextProvider } from 'react-netlify-identity-widget'
import './static/scss/styles.css'

export const wrapRootElement = ({ element }) => (
<IdentityContextProvider url='https://publiuslogic.com'> // without trailing slash /
{element}
</IdentityContextProvider>
)`

check it out at publiuslogic.com

namespace css

right now our css relies on .btn and such, that has a high chance of leaking. lets namespace.

Password reset

Unsing "react-netlify-identity-widget": "^0.2.4" with "gatsby-plugin-netlify-identity" it looks like the "Forgot password" button on the IdentityModal is not working.

And second issue is when I "send reset password mail" from within netlify, the mail is received, but the contained link just leads to the hompepage instead of any site where the password could be reset.

Could these two issues be fixed? I do very much appreciate the convenience this plugin offers.