diff --git a/README.md b/README.md index f716cf7..d5f3feb 100644 --- a/README.md +++ b/README.md @@ -12,14 +12,12 @@ Three demos: - [example with Reach Router](https://github.com/sw-yx/react-netlify-identity/tree/master/examples/example-reach-router) with [a demo hosted here](https://react-netlify-identity.netlify.com) and [deployed logs here](https://app.netlify.com/sites/react-netlify-identity/deploys) - [example with React Router](https://github.com/sw-yx/react-netlify-identity/tree/master/examples/example-react-router) with [a demo hosted here](https://react-netlify-identity-example.netlify.com) - **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. ## Blogposts - [Add Netlify Identity Authentication to any React App in 5 minutes with React Context, Hooks and Suspense](https://dev.to/swyx/add-netlify-identity-authentication-to-any-react-app-in-5-minutes-with-react-context-hooks-and-suspense-5gci) - ## 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 @@ -51,13 +49,19 @@ yarn add react-netlify-identity - `isConfirmedUser: boolean`: if they have confirmed their email - `isLoggedIn: boolean`: if the user is logged in - `signupUser(email: string, password: string, data: Object)` -- `loginUser(email: string, password: string, remember: Boolean)` - we default the `remember` term to `true` since you'll usually want to remember the session in localStorage. set it to false if you need to +- `loginUser(email: string, password: string, remember: boolean = true)` - we default the `remember` term to `true` since you'll usually want to remember the session in localStorage. set it to false if you need to - `logoutUser()` - `requestPasswordRecovery(email: string)` -- `recoverAccount(token: string, remember?: boolean | undefined)` - `updateUser(fields: { data: object })` - `getFreshJWT()` -- `authedFetch(endpoint: string, obj = {})` (a thin axios-like wrapper over `fetch` that has the user's JWT attached, for convenience pinging Netlify Functions with Netlify Identity) +- `authedFetch(endpoint: string, obj: RequestInit = {})` a thin axios-like wrapper over `fetch` that has the user's JWT attached, for convenience pinging Netlify Functions with Netlify Identity +- `param: TokenParam` + - a token exposing Netlify tokens a dev has to implement the actions for; namely `invite`, `recovery`, `email_change` and `access_denied` + - **Important:** tokens this package exposes no methods for are automatically handled and will not be passed down - see [runRoutes implementation](https://github.com/sw-yx/react-netlify-identity/master/src/runRoutes.tsx) + - if you don't want this behaviour (added [here](https://github.com/sw-yx/react-netlify-identity/issues/12) in v.0.1.8), pass `runRoutes={false}` to the exposed hook + - for further reference, please check the [type definition](https://github.com/sw-yx/react-netlify-identity/tree/master/src/token.ts) + - an example implementation for a Recovery process can be found below +- `recoverAccount(remember?: boolean)`: verifies and consumes the recovery token caught by `runRoutes`, sets user on success ```tsx import React from 'react'; @@ -89,9 +93,11 @@ function Login() { const { loginUser, signupUser } = useIdentityContext(); 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); @@ -99,6 +105,7 @@ function Login() { }) .catch(err => console.error(err) || setMsg('Error: ' + err.message)); }; + return (
+
+ +

+ How to handle a Recovery Action (since v0.2) +

+ + +Of course you can alternatively inline this logic into app. + +```tsx +import { useIdentityContext } from 'react-netlify-identity'; +import { + BrowserRouter as Router, + Switch, + Route, + useLocation, + useHistory, +} from 'react-router-dom'; + +export default function App() { + const { isLoggedIn } = useIdentityContext(); + + return ( + + + + {isLoggedIn ? ( + <> + + } /> + + ) : ( + <> + + + + {/* etc */} + + } /> + + )} + + + ); +} + +function CatchNetlifyRecoveryNullComponent() { + const { + param: { token, type }, + } = useIdentityContext(); + const { replace } = useHistory(); + const { pathname } = useLocation(); + + // important to check for the current pathname here because else you land + // in a infinite loop + if (token && type === 'recovery' && pathname === '/') { + replace(`/recovery`, { token }); + } + + return null; +} + +function RecoveryPage() { + const { + location: { state }, + } = useHistory(); + // this state _might_ not be needed, it was needed in my specific implementation + const [token] = useState(state?.token); + + return null; // set new password in a form and call updateUser +} +``` + +
+ ## Lower level API: `useNetlifyIdentity` If you'd like to handle your own context yourself, you can use this library as a hook as well: @@ -201,8 +283,6 @@ function useNetlifyIdentity( ): ReactNetlifyIdentityAPI; ``` -the library watches for and handles confirmation routes by default. If you don't like this, pass `enableRunRoutes: false`. This was added here https://github.com/sw-yx/react-netlify-identity/issues/12 in v0.1.8 - ## License MIT © [sw-yx](https://github.com/sw-yx) diff --git a/package.json b/package.json index 643a4cf..11662f6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-netlify-identity", - "version": "0.2.0", + "version": "0.2.1", "description": "use netlify identity with react", "author": "sw-yx", "license": "MIT", diff --git a/src/index.tsx b/src/index.tsx index 95e08ad..529403e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,11 +4,9 @@ import React, { useEffect, createContext, useContext, + useCallback, // types - Dispatch, - SetStateAction, ReactNode, - useCallback, } from 'react'; import GoTrue, { @@ -48,7 +46,7 @@ type MaybeUserPromise = Promise; export type ReactNetlifyIdentityAPI = { user: User | undefined; /** not meant for normal use! you should mostly use one of the other exported methods to update the user instance */ - setUser: Dispatch>; + setUser: (_user: GoTrueUser | undefined) => GoTrueUser | undefined; isConfirmedUser: boolean; isLoggedIn: boolean; signupUser: ( @@ -218,16 +216,20 @@ export function useNetlifyIdentity( ); const recoverAccount = useCallback( - (remember?: boolean | undefined) => { + (remember?: boolean) => { if (!param.token || param.type !== 'recovery') { throw new Error(errors.tokenMissingOrInvalid); } - return goTrueInstance.recover(param.token, remember).then(user => { - // clean up consumed token - setParam(defaultParam); - return _setUser(user); - }); + return goTrueInstance + .recover(param.token, remember) + .then(user => { + return _setUser(user); + }) + .finally(() => { + // clean up consumed token + setParam(defaultParam); + }); }, [goTrueInstance, _setUser, param] ); @@ -294,7 +296,7 @@ export function useNetlifyIdentity( return { user, /** not meant for normal use! you should mostly use one of the other exported methods to update the user instance */ - setUser, + setUser: _setUser, isConfirmedUser: !!(user && user.confirmed_at), isLoggedIn: !!user, signupUser, diff --git a/src/token.ts b/src/token.ts index 79212f3..cee9409 100644 --- a/src/token.ts +++ b/src/token.ts @@ -1,8 +1,8 @@ export type TokenParam = { token: string | undefined; type: 'invite' | 'recovery' | 'email_change' | undefined; - error?: 'access_denied'; - status?: 403; + error: 'access_denied' | undefined; + status: 403 | undefined; }; export const defaultParam: TokenParam = {