Skip to content

Commit 743a354

Browse files
author
sw-yx
committed
readme
1 parent 18f353f commit 743a354

File tree

1 file changed

+35
-42
lines changed

1 file changed

+35
-42
lines changed

README.md

+35-42
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ yarn add react-netlify-identity
4141
- `isConfirmedUser: boolean`: if they have confirmed their email
4242
- `isLoggedIn: boolean`: if the user is logged in
4343
- `signupUser(email: string, password: string, data: Object)`
44-
- `loginUser(email: string, password: string, remember: Boolean)`
44+
- `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
4545
- `logoutUser()`
4646
- `requestPasswordRecovery(email: string)`
4747
- `recoverAccount(token: string, remember?: boolean | undefined)`
@@ -50,18 +50,14 @@ yarn add react-netlify-identity
5050
- `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)
5151

5252
```tsx
53-
import * as React from 'react';
53+
import * as React from "react"
5454

55-
import { useNetlifyIdentity } from 'react-netlify-identity';
55+
import { useNetlifyIdentity } from "react-netlify-identity"
5656

57-
const IdentityContext = React.createContext(); // not necessary but recommended
57+
const IdentityContext = React.createContext() // not necessary but recommended
5858
function App() {
59-
const identity = useNetlifyIdentity(url); // supply the url of your Netlify site instance. VERY IMPORTANT
60-
return (
61-
<IdentityContext.Provider value={identity}>
62-
{/* rest of your app */}
63-
</IdentityContext.Provider>
64-
);
59+
const identity = useNetlifyIdentity(url) // supply the url of your Netlify site instance. VERY IMPORTANT
60+
return <IdentityContext.Provider value={identity}>{/* rest of your app */}</IdentityContext.Provider>
6561
}
6662
```
6763

@@ -75,32 +71,32 @@ Click for More Example code
7571
```tsx
7672
// log in/sign up example
7773
function Login() {
78-
const { loginUser, signupUser } = React.useContext(IdentityContext);
79-
const formRef = React.useRef();
80-
const [msg, setMsg] = React.useState('');
74+
const { loginUser, signupUser } = React.useContext(IdentityContext)
75+
const formRef = React.useRef()
76+
const [msg, setMsg] = React.useState("")
8177
const signup = () => {
82-
const email = formRef.current.email.value;
83-
const password = formRef.current.password.value;
78+
const email = formRef.current.email.value
79+
const password = formRef.current.password.value
8480
signupUser(email, password)
8581
.then(user => {
86-
console.log('Success! Signed up', user);
87-
navigate('/dashboard');
82+
console.log("Success! Signed up", user)
83+
navigate("/dashboard")
8884
})
89-
.catch(err => console.error(err) || setMsg('Error: ' + err.message));
90-
};
85+
.catch(err => console.error(err) || setMsg("Error: " + err.message))
86+
}
9187
return (
9288
<form
9389
ref={formRef}
9490
onSubmit={e => {
95-
e.preventDefault();
96-
const email = e.target.email.value;
97-
const password = e.target.password.value;
91+
e.preventDefault()
92+
const email = e.target.email.value
93+
const password = e.target.password.value
9894
load(loginUser(email, password, true))
9995
.then(user => {
100-
console.log('Success! Logged in', user);
101-
navigate('/dashboard');
96+
console.log("Success! Logged in", user)
97+
navigate("/dashboard")
10298
})
103-
.catch(err => console.error(err) || setMsg('Error: ' + err.message));
99+
.catch(err => console.error(err) || setMsg("Error: " + err.message))
104100
}}
105101
>
106102
<div>
@@ -121,58 +117,55 @@ function Login() {
121117
{msg && <pre>{msg}</pre>}
122118
</div>
123119
</form>
124-
);
120+
)
125121
}
126122

127123
// log out user
128124
function Logout() {
129-
const { logoutUser } = React.useContext(IdentityContext);
130-
return <button onClick={logoutUser}>You are signed in. Log Out</button>;
125+
const { logoutUser } = React.useContext(IdentityContext)
126+
return <button onClick={logoutUser}>You are signed in. Log Out</button>
131127
}
132128

133129
// check `identity.user` in a protected route
134130
function PrivateRoute(props) {
135-
const identity = React.useContext(IdentityContext);
136-
let { as: Comp, ...rest } = props;
131+
const identity = React.useContext(IdentityContext)
132+
let { as: Comp, ...rest } = props
137133
return identity.user ? (
138134
<Comp {...rest} />
139135
) : (
140136
<div>
141137
<h3>You are trying to view a protected page. Please log in</h3>
142138
<Login />
143139
</div>
144-
);
140+
)
145141
}
146142

147143
// check if user has confirmed their email
148144
// use authedFetch API to make a request to Netlify Function with the user's JWT token,
149145
// letting your function use the `user` object
150146
function Dashboard() {
151-
const { isConfirmedUser, authedFetch } = React.useContext(IdentityContext);
152-
const [msg, setMsg] = React.useState('Click to load something');
147+
const { isConfirmedUser, authedFetch } = React.useContext(IdentityContext)
148+
const [msg, setMsg] = React.useState("Click to load something")
153149
const handler = () => {
154-
authedFetch.get('/.netlify/functions/authEndPoint').then(setMsg);
155-
};
150+
authedFetch.get("/.netlify/functions/authEndPoint").then(setMsg)
151+
}
156152
return (
157153
<div>
158154
<h3>This is a Protected Dashboard!</h3>
159155
{!isConfirmedUser && (
160-
<pre style={{ backgroundColor: 'papayawhip' }}>
161-
You have not confirmed your email. Please confirm it before you ping
162-
the API.
156+
<pre style={{ backgroundColor: "papayawhip" }}>
157+
You have not confirmed your email. Please confirm it before you ping the API.
163158
</pre>
164159
)}
165160
<hr />
166161
<div>
167162
<p>You can try pinging our authenticated API here.</p>
168-
<p>
169-
If you are logged in, you should be able to see a `user` info here.
170-
</p>
163+
<p>If you are logged in, you should be able to see a `user` info here.</p>
171164
<button onClick={handler}>Ping authenticated API</button>
172165
<pre>{JSON.stringify(msg, null, 2)}</pre>
173166
</div>
174167
</div>
175-
);
168+
)
176169
}
177170
```
178171

0 commit comments

Comments
 (0)