add full_name and image

Author: sw-yx

.size-snapshot.json

@@ -1,28 +1,28 @@
 {
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.development.js": {
-    "bundled": 11694,
-    "minified": 7556,
-    "gzipped": 1906
+    "bundled": 11959,
+    "minified": 7561,
+    "gzipped": 1911
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.production.js": {
-    "bundled": 11694,
-    "minified": 7556,
-    "gzipped": 1906
+    "bundled": 11959,
+    "minified": 7561,
+    "gzipped": 1911
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.development.js": {
-    "bundled": 12617,
-    "minified": 6616,
-    "gzipped": 1873
+    "bundled": 12896,
+    "minified": 6621,
+    "gzipped": 1878
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.production.js": {
-    "bundled": 12617,
-    "minified": 6616,
-    "gzipped": 1873
+    "bundled": 12896,
+    "minified": 6621,
+    "gzipped": 1878
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.es.production.js": {
-    "bundled": 11459,
-    "minified": 7367,
-    "gzipped": 1855,
+    "bundled": 11724,
+    "minified": 7372,
+    "gzipped": 1860,
     "treeshaked": {
       "rollup": {
         "code": 524,

example/src/App.tsx

@@ -7,13 +7,15 @@ function App() {
   const [dialog, setDialog] = React.useState(false)
   const identity = useNetlifyIdentity("https://react-netlify-identity-widget.netlify.com")
   const name =
-    (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.name) || "NoName"
+    (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 (
     <IdentityContextProvider value={identity}>
       <div className="App">
         {identity && identity.isLoggedIn ? (
           <header className="App-header">
             <h1> hello {name}!</h1>
+            {avatar_url && <img src={avatar_url} style={{ height: 100, borderRadius: "50%" }} />}
             <button className="btn" style={{ maxWidth: 400, background: "orangered" }} onClick={() => setDialog(true)}>
               LOG OUT
             </button>

src/components/signup.tsx

@@ -10,10 +10,10 @@ export function Signup() {
   const [isLoading, load] = useLoading()
   const signup = () => {
     if (!formRef.current) return
-    const name = formRef.current.username.value
+    const full_name = formRef.current.username.value
     const email = formRef.current.email.value
     const password = formRef.current.password.value
-    const data = { signupSource: "react-netlify-identity-widget", name }
+    const data = { signupSource: "react-netlify-identity-widget", full_name }
     load(signupUser(email, password, data))
       .then(user => {
         console.log("Success! Signed up", user)