Skip to content

Commit f4a7166

Browse files
author
sw-yx
committed
fix: basic working identity usage
1 parent ef916b1 commit f4a7166

File tree

7 files changed

+159
-96
lines changed

7 files changed

+159
-96
lines changed

‎.size-snapshot.json

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
{
22
"/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.development.js": {
3-
"bundled": 1146,
4-
"minified": 831,
5-
"gzipped": 428
3+
"bundled": 4959,
4+
"minified": 1340,
5+
"gzipped": 566
66
},
77
"/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.production.js": {
8-
"bundled": 1146,
9-
"minified": 831,
10-
"gzipped": 428
8+
"bundled": 4959,
9+
"minified": 1340,
10+
"gzipped": 566
1111
},
1212
"/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.development.js": {
13-
"bundled": 1604,
14-
"minified": 988,
15-
"gzipped": 520
13+
"bundled": 5705,
14+
"minified": 1367,
15+
"gzipped": 620
1616
},
1717
"/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.production.js": {
18-
"bundled": 1604,
19-
"minified": 988,
20-
"gzipped": 520
18+
"bundled": 5705,
19+
"minified": 1367,
20+
"gzipped": 620
2121
},
2222
"/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.es.production.js": {
23-
"bundled": 979,
24-
"minified": 703,
25-
"gzipped": 364,
23+
"bundled": 4770,
24+
"minified": 1191,
25+
"gzipped": 504,
2626
"treeshaked": {
2727
"rollup": {
28-
"code": 67,
29-
"import_statements": 67
28+
"code": 129,
29+
"import_statements": 105
3030
},
3131
"webpack": {
32-
"code": 1117
32+
"code": 1222
3333
}
3434
}
3535
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"dependencies": {
4444
"@reach/dialog": "^0.2.3",
4545
"@reach/visually-hidden": "^0.1.3",
46-
"react-netlify-identity": "^0.0.9"
46+
"react-netlify-identity": "^0.0.12"
4747
},
4848
"config": {
4949
"commitizen": {

‎src/app.tsx

+66-51
Original file line numberDiff line numberDiff line change
@@ -8,63 +8,78 @@ import { useNetlifyIdentity } from "react-netlify-identity"
88
// import Providers from "./forms/providers"
99
// import Message from "./forms/message"
1010
import { IdentityContext } from "./context"
11+
// const pagesWithHeader = { login: true, signup: true }
12+
// const pages = {
13+
// login: {
14+
// login: true,
15+
// button: "Log in",
16+
// button_saving: "Logging in",
17+
// email: true,
18+
// password: true,
19+
// link: "amnesia",
20+
// link_text: "Forgot password?",
21+
// providers: true
22+
// },
23+
// signup: {
24+
// signup: true,
25+
// button: "Sign up",
26+
// button_saving: "Signing Up",
27+
// name: true,
28+
// email: true,
29+
// password: true,
30+
// providers: true
31+
// },
32+
// amnesia: {
33+
// title: "Recover password",
34+
// button: "Send recovery email",
35+
// button_saving: "Sending recovery email",
36+
// email: true,
37+
// link: "login",
38+
// link_text: "Never mind"
39+
// },
40+
// recovery: {
41+
// title: "Recover password",
42+
// button: "Update password",
43+
// button_saving: "Updating password",
44+
// password: true,
45+
// link: "login",
46+
// link_text: "Never mind"
47+
// },
48+
// invite: {
49+
// title: "Complete your signup",
50+
// button: "Sign up",
51+
// button_saving: "Signing Up",
52+
// password: true,
53+
// providers: true
54+
// },
55+
// user: {
56+
// title: "Logged in"
57+
// }
58+
// }
59+
60+
function LoggedOutScreen() {
61+
return <div>logged out</div>
62+
}
63+
function LoggedInScreen() {
64+
return <div>logged in</div>
65+
}
1166

12-
const pagesWithHeader = { login: true, signup: true }
13-
const pages = {
14-
login: {
15-
login: true,
16-
button: "Log in",
17-
button_saving: "Logging in",
18-
email: true,
19-
password: true,
20-
link: "amnesia",
21-
link_text: "Forgot password?",
22-
providers: true
23-
},
24-
signup: {
25-
signup: true,
26-
button: "Sign up",
27-
button_saving: "Signing Up",
28-
name: true,
29-
email: true,
30-
password: true,
31-
providers: true
32-
},
33-
amnesia: {
34-
title: "Recover password",
35-
button: "Send recovery email",
36-
button_saving: "Sending recovery email",
37-
email: true,
38-
link: "login",
39-
link_text: "Never mind"
40-
},
41-
recovery: {
42-
title: "Recover password",
43-
button: "Update password",
44-
button_saving: "Updating password",
45-
password: true,
46-
link: "login",
47-
link_text: "Never mind"
48-
},
49-
invite: {
50-
title: "Complete your signup",
51-
button: "Sign up",
52-
button_saving: "Signing Up",
53-
password: true,
54-
providers: true
55-
},
56-
user: {
57-
title: "Logged in"
58-
}
67+
function Gate() {
68+
const identity = React.useContext(IdentityContext)
69+
const isLoggedIn = Boolean(identity && identity.user)
70+
return isLoggedIn ? <LoggedInScreen /> : <LoggedOutScreen />
5971
}
6072

61-
function App() {
73+
export function Widget() {
6274
const identity = useNetlifyIdentity("https://identity.netlify.com/") // supply the url of your Netlify site instance. VERY IMPORTANT
63-
64-
return <IdentityContext.Provider value={identity}>div</IdentityContext.Provider>
75+
return (
76+
<IdentityContext.Provider value={identity}>
77+
<Gate />
78+
</IdentityContext.Provider>
79+
)
6580
}
6681

67-
export default App
82+
export const NetlifyIdentityContext = IdentityContext // for use in your React app
6883

6984
// renderBody() {
7085
// const { store } = this.props

‎src/index.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
} from "@reach/dialog"
77
import VisuallyHidden from "@reach/visually-hidden"
88

9+
import { Widget } from "./app"
910
type ModalProps = {
1011
/** pass a boolean to be true or false */
1112
showDialog: boolean
@@ -26,10 +27,8 @@ export function Modal({ showDialog, onCloseDialog }: ModalProps) {
2627
<span aria-hidden>×</span>
2728
</button>
2829
<div>
29-
<p>I have a nice border now.</p>
30-
<p>
31-
Note that we could have used the simpler <code>Dialog</code> instead.
32-
</p>
30+
widget
31+
<Widget />
3332
</div>
3433
</DialogContent>
3534
</DialogOverlay>

‎src/login.tsx

+15-12
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
11
import React from "react"
22
import { IdentityContext } from "./context"
33
// import { User } from "react-netlify-identity"
4-
4+
import useLoading from "./useLoading"
55
// log in/sign up example
66

77
export function Login() {
8-
const ctx = React.useContext(IdentityContext)
9-
if (!ctx) return
10-
const { loginUser, signupUser } = ctx
8+
const identity = React.useContext(IdentityContext)
9+
if (!identity) throw new Error("invalid context")
10+
const { loginUser, signupUser } = identity
1111
const formRef = React.useRef<HTMLFormElement>(null)
1212
const [msg, setMsg] = React.useState("")
13+
const [isLoading, load] = useLoading()
1314
const signup = () => {
1415
if (!formRef.current) return
1516
const email = formRef.current.email.value
1617
const password = formRef.current.password.value
1718
const data = { signupSource: "react-netlify-identity-widget" }
18-
signupUser(email, password, data)
19+
load(signupUser(email, password, data))
1920
.then(user => {
2021
console.log("Success! Signed up", user)
21-
navigate("/dashboard")
22+
// navigate("/dashboard")
2223
})
23-
.catch(err => console.error(err) || setMsg("Error: " + err.message))
24+
.catch(err => void console.error(err) || setMsg("Error: " + err.message))
2425
}
2526
return (
2627
<form
2728
ref={formRef}
28-
onSubmit={e => {
29+
onSubmit={(e: React.SyntheticEvent) => {
2930
e.preventDefault()
30-
const email = e.target.email.value
31-
const password = e.target.password.value
31+
const target = e.target as typeof e.target & { email: { value: string }; password: { value: string } }
32+
const email = target.email.value
33+
const password = target.password.value
3234
load(loginUser(email, password, true))
3335
.then(user => {
3436
console.log("Success! Logged in", user)
35-
navigate("/dashboard")
37+
// navigate("/dashboard")
3638
})
37-
.catch(err => console.error(err) || setMsg("Error: " + err.message))
39+
.catch(err => void console.error(err) || setMsg("Error: " + err.message))
3840
}}
3941
>
4042
<div>
@@ -50,6 +52,7 @@ export function Login() {
5052
</label>
5153
</div>
5254
<div>
55+
{isLoading && "loading..."}
5356
<input type="submit" value="Log in" />
5457
<button onClick={signup}>Sign Up </button>
5558
{msg && <pre>{msg}</pre>}

‎src/useLoading.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from "react"
2+
3+
export default function useLoading() {
4+
const [isLoading, setState] = React.useState(false)
5+
function load<A>(aPromise: Promise<A>) {
6+
setState(true)
7+
return aPromise
8+
.then((...args) => {
9+
setState(false)
10+
return Promise.resolve(...args)
11+
})
12+
.catch((...args) => {
13+
setState(false)
14+
return Promise.reject(...args)
15+
})
16+
}
17+
return [isLoading, load] as [boolean, <A>(aPromise: Promise<A>) => Promise<A>]
18+
}

‎yarn.lock

+38-10
Original file line numberDiff line numberDiff line change
@@ -3171,10 +3171,10 @@ got@^6.7.1:
31713171
unzip-response "^2.0.1"
31723172
url-parse-lax "^1.0.0"
31733173

3174-
gotrue-js@^0.9.24:
3175-
version "0.9.24"
3176-
resolved "https://registry.yarnpkg.com/gotrue-js/-/gotrue-js-0.9.24.tgz#cff20efa170f1670ec7268242604477ba0c4e0d3"
3177-
integrity sha512-lIPNjCf9246Qk71MzV6wSW4EC3F2ejPXFn8/3IQoDdB3mpfGTqBMZFXEknvXE+sr7XpA2z3EhV8QSPorH+UAFg==
3174+
gotrue-js@^0.9.25:
3175+
version "0.9.25"
3176+
resolved "https://registry.yarnpkg.com/gotrue-js/-/gotrue-js-0.9.25.tgz#eb9a3c76a2d08629afcda7872a60924d5d671c6a"
3177+
integrity sha512-W3U3TqItiHfpYODlH8hA7dwnui9pu4iDsDbE7UuqS/ODJ5r3/+nlBe30ir4cemRMy16oyPpuvq23l9EjiCD7kg==
31783178
dependencies:
31793179
micro-api-client "^3.2.1"
31803180

@@ -4811,7 +4811,7 @@ longest@^1.0.1:
48114811
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
48124812
integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
48134813

4814-
loose-envify@^1.0.0, loose-envify@^1.4.0:
4814+
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
48154815
version "1.4.0"
48164816
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
48174817
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6502,6 +6502,16 @@ react-clientside-effect@^1.2.0:
65026502
"@babel/runtime" "^7.0.0"
65036503
shallowequal "^1.1.0"
65046504

6505+
react-dom@^16.8.6:
6506+
version "16.8.6"
6507+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
6508+
integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
6509+
dependencies:
6510+
loose-envify "^1.1.0"
6511+
object-assign "^4.1.1"
6512+
prop-types "^15.6.2"
6513+
scheduler "^0.13.6"
6514+
65056515
react-focus-lock@^1.17.7:
65066516
version "1.18.3"
65076517
resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.18.3.tgz#19d84afeab935c0b5de196922f71db7c481baba4"
@@ -6517,12 +6527,12 @@ react-is@^16.8.1:
65176527
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
65186528
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
65196529

6520-
react-netlify-identity@^0.0.9:
6521-
version "0.0.9"
6522-
resolved "https://registry.yarnpkg.com/react-netlify-identity/-/react-netlify-identity-0.0.9.tgz#4b037b6f3143b048e91fad63fcdd5729d7456eb2"
6523-
integrity sha512-K9W4B89rf11TlyNRkhqtxjAj7f5miM+GvJEaykB5H6lBLbGbkLbsPUeGdor7X/u6RAJOAKIS1kSMwnkmASiEYg==
6530+
react-netlify-identity@^0.0.12:
6531+
version "0.0.12"
6532+
resolved "https://registry.yarnpkg.com/react-netlify-identity/-/react-netlify-identity-0.0.12.tgz#8479cf37c7ae8380fc7ffe0f52c0d6c9e61dbb03"
6533+
integrity sha512-C4ISeDPAD1N+N0sj4Atcz6DINKxGWV/S46ttY7TMl+oUWreOdzV9SdEx+7G4vRhKfwXnXcF9KZKxUtLXd+0NCA==
65246534
dependencies:
6525-
gotrue-js "^0.9.24"
6535+
gotrue-js "^0.9.25"
65266536

65276537
react-remove-scroll-bar@^1.1.3:
65286538
version "1.1.4"
@@ -6548,6 +6558,16 @@ react-style-singleton@^1.1.0:
65486558
invariant "^2.2.4"
65496559
tslib "^1.0.0"
65506560

6561+
react@^16.8.6:
6562+
version "16.8.6"
6563+
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
6564+
integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
6565+
dependencies:
6566+
loose-envify "^1.1.0"
6567+
object-assign "^4.1.1"
6568+
prop-types "^15.6.2"
6569+
scheduler "^0.13.6"
6570+
65516571
read-cmd-shim@^1.0.1, read-cmd-shim@~1.0.1:
65526572
version "1.0.1"
65536573
resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.1.tgz#2d5d157786a37c055d22077c32c53f8329e91c7b"
@@ -7146,6 +7166,14 @@ sax@^1.2.4:
71467166
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
71477167
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
71487168

7169+
scheduler@^0.13.6:
7170+
version "0.13.6"
7171+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
7172+
integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
7173+
dependencies:
7174+
loose-envify "^1.1.0"
7175+
object-assign "^4.1.1"
7176+
71497177
schema-utils@^1.0.0:
71507178
version "1.0.0"
71517179
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"

0 commit comments

Comments
 (0)