@@ -41,7 +41,7 @@ yarn add react-netlify-identity
41
41
- ` isConfirmedUser: boolean ` : if they have confirmed their email
42
42
- ` isLoggedIn: boolean ` : if the user is logged in
43
43
- ` 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
45
45
- ` logoutUser() `
46
46
- ` requestPasswordRecovery(email: string) `
47
47
- ` recoverAccount(token: string, remember?: boolean | undefined) `
@@ -50,18 +50,14 @@ yarn add react-netlify-identity
50
50
- ` 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)
51
51
52
52
``` tsx
53
- import * as React from ' react' ;
53
+ import * as React from " react"
54
54
55
- import { useNetlifyIdentity } from ' react-netlify-identity' ;
55
+ import { useNetlifyIdentity } from " react-netlify-identity"
56
56
57
- const IdentityContext = React .createContext (); // not necessary but recommended
57
+ const IdentityContext = React .createContext () // not necessary but recommended
58
58
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 >
65
61
}
66
62
```
67
63
@@ -75,32 +71,32 @@ Click for More Example code
75
71
``` tsx
76
72
// log in/sign up example
77
73
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 (" " )
81
77
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
84
80
signupUser (email , password )
85
81
.then (user => {
86
- console .log (' Success! Signed up' , user );
87
- navigate (' /dashboard' );
82
+ console .log (" Success! Signed up" , user )
83
+ navigate (" /dashboard" )
88
84
})
89
- .catch (err => console .error (err ) || setMsg (' Error: ' + err .message ));
90
- };
85
+ .catch (err => console .error (err ) || setMsg (" Error: " + err .message ))
86
+ }
91
87
return (
92
88
<form
93
89
ref = { formRef }
94
90
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
98
94
load (loginUser (email , password , true ))
99
95
.then (user => {
100
- console .log (' Success! Logged in' , user );
101
- navigate (' /dashboard' );
96
+ console .log (" Success! Logged in" , user )
97
+ navigate (" /dashboard" )
102
98
})
103
- .catch (err => console .error (err ) || setMsg (' Error: ' + err .message ));
99
+ .catch (err => console .error (err ) || setMsg (" Error: " + err .message ))
104
100
}}
105
101
>
106
102
<div >
@@ -121,58 +117,55 @@ function Login() {
121
117
{ msg && <pre >{ msg } </pre >}
122
118
</div >
123
119
</form >
124
- );
120
+ )
125
121
}
126
122
127
123
// log out user
128
124
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 >
131
127
}
132
128
133
129
// check `identity.user` in a protected route
134
130
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
137
133
return identity .user ? (
138
134
<Comp { ... rest } />
139
135
) : (
140
136
<div >
141
137
<h3 >You are trying to view a protected page. Please log in</h3 >
142
138
<Login />
143
139
</div >
144
- );
140
+ )
145
141
}
146
142
147
143
// check if user has confirmed their email
148
144
// use authedFetch API to make a request to Netlify Function with the user's JWT token,
149
145
// letting your function use the `user` object
150
146
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" )
153
149
const handler = () => {
154
- authedFetch .get (' /.netlify/functions/authEndPoint' ).then (setMsg );
155
- };
150
+ authedFetch .get (" /.netlify/functions/authEndPoint" ).then (setMsg )
151
+ }
156
152
return (
157
153
<div >
158
154
<h3 >This is a Protected Dashboard!</h3 >
159
155
{ ! 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.
163
158
</pre >
164
159
)}
165
160
<hr />
166
161
<div >
167
162
<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 >
171
164
<button onClick = { handler } >Ping authenticated API</button >
172
165
<pre >{ JSON .stringify (msg , null , 2 )} </pre >
173
166
</div >
174
167
</div >
175
- );
168
+ )
176
169
}
177
170
```
178
171
0 commit comments