Build a User Management App with RedwoodJS

1
SUPABASE_URL=YOUR_SUPABASE_URL
2
SUPABASE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
3
SUPABASE_JWT_SECRET=YOUR_SUPABASE_JWT_SECRET

1
[web]
2
  title = "Supabase Redwood Tutorial"
3
  port = 8910
4
  apiProxyPath = "/.redwood/functions"
5
  includeEnvironmentVariables = ["SUPABASE_URL", "SUPABASE_KEY"]
6
[api]
7
  port = 8911
8
[browser]
9
  open = true

1
// ... Redwood imports
2
import { AuthProvider } from '@redwoodjs/auth'
3
import { createClient } from '@supabase/supabase-js'
4
5
// ...
6
7
const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)
8
9
const App = () => (
10
  <FatalErrorBoundary page={FatalErrorPage}>
11
    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
12
      <AuthProvider client={supabase} type="supabase">
13
        <RedwoodApolloProvider>
14
          <Routes />
15
        </RedwoodApolloProvider>
16
      </AuthProvider>
17
    </RedwoodProvider>
18
  </FatalErrorBoundary>
19
)
20
21
export default App

1
import { Router, Route } from '@redwoodjs/router'
2
3
const Routes = () => {
4
  return (
5
    <Router>
6
      <Route path="/" page={HomePage} name="home" />
7
      <Route notfound page={NotFoundPage} />
8
    </Router>
9
  )
10
}
11
12
export default Routes

1
import { useAuth } from '@redwoodjs/auth'
2
import { useState } from 'react'
3
4
const Auth = () => {
5
  const { logIn } = useAuth()
6
  const [loading, setLoading] = useState(false)
7
  const [email, setEmail] = useState('')
8
9
  const handleLogin = async (email) => {
10
    try {
11
      setLoading(true)
12
      const { error } = await logIn({ email })
13
      if (error) throw error
14
      alert('Check your email for the login link!')
15
    } catch (error) {
16
      alert(error.error_description || error.message)
17
    } finally {
18
      setLoading(false)
19
    }
20
  }
21
22
  return (
23
    <div className="row flex-center flex">
24
      <div className="col-6 form-widget">
25
        <h1 className="header">Supabase + RedwoodJS</h1>
26
        <p className="description">Sign in via magic link with your email below</p>
27
        <div>
28
          <input
29
            className="inputField"
30
            type="email"
31
            placeholder="Your email"
32
            value={email}
33
            onChange={(e) => setEmail(e.target.value)}
34
          />
35
        </div>
36
        <div>
37
          <button
38
            onClick={(e) => {
39
              e.preventDefault()
40
              handleLogin(email)
41
            }}
42
            className={'button block'}
43
            disabled={loading}
44
          >
45
            {loading ? <span>Loading</span> : <span>Send magic link</span>}
46
          </button>
47
        </div>
48
      </div>
49
    </div>
50
  )
51
}
52
53
export default Auth

1
import { useAuth } from '@redwoodjs/auth'
2
import { useEffect, useState } from 'react'
3
4
const Account = () => {
5
  const { client: supabase, currentUser, logOut } = useAuth()
6
  const [loading, setLoading] = useState(true)
7
  const [username, setUsername] = useState(null)
8
  const [website, setWebsite] = useState(null)
9
  const [avatar_url, setAvatarUrl] = useState(null)
10
11
  useEffect(() => {
12
    getProfile()
13
  }, [supabase.auth.session])
14
15
  async function getProfile() {
16
    try {
17
      setLoading(true)
18
      const user = supabase.auth.user()
19
20
      const { data, error, status } = await supabase
21
        .from('profiles')
22
        .select(`username, website, avatar_url`)
23
        .eq('id', user.id)
24
        .single()
25
26
      if (error && status !== 406) {
27
        throw error
28
      }
29
30
      if (data) {
31
        setUsername(data.username)
32
        setWebsite(data.website)
33
        setAvatarUrl(data.avatar_url)
34
      }
35
    } catch (error) {
36
      alert(error.message)
37
    } finally {
38
      setLoading(false)
39
    }
40
  }
41
42
  async function updateProfile({ username, website, avatar_url }) {
43
    try {
44
      setLoading(true)
45
      const user = supabase.auth.user()
46
47
      const updates = {
48
        id: user.id,
49
        username,
50
        website,
51
        avatar_url,
52
        updated_at: new Date(),
53
      }
54
55
      const { error } = await supabase.from('profiles').upsert(updates, {
56
        returning: 'minimal', // Don't return the value after inserting
57
      })
58
59
      if (error) {
60
        throw error
61
      }
62
63
      alert('Updated profile!')
64
    } catch (error) {
65
      alert(error.message)
66
    } finally {
67
      setLoading(false)
68
    }
69
  }
70
71
  return (
72
    <div className="row flex-center flex">
73
      <div className="col-6 form-widget">
74
        <h1 className="header">Supabase + RedwoodJS</h1>
75
        <p className="description">Your profile</p>
76
        <div className="form-widget">
77
          <div>
78
            <label htmlFor="email">Email</label>
79
            <input id="email" type="text" value={currentUser.email} disabled />
80
          </div>
81
          <div>
82
            <label htmlFor="username">Name</label>
83
            <input
84
              id="username"
85
              type="text"
86
              value={username || ''}
87
              onChange={(e) => setUsername(e.target.value)}
88
            />
89
          </div>
90
          <div>
91
            <label htmlFor="website">Website</label>
92
            <input
93
              id="website"
94
              type="url"
95
              value={website || ''}
96
              onChange={(e) => setWebsite(e.target.value)}
97
            />
98
          </div>
99
100
          <div>
101
            <button
102
              className="button primary block"
103
              onClick={() => updateProfile({ username, website, avatar_url })}
104
              disabled={loading}
105
            >
106
              {loading ? 'Loading ...' : 'Update'}
107
            </button>
108
          </div>
109
110
          <div>
111
            <button className="button block" onClick={() => logOut()}>
112
              Sign Out
113
            </button>
114
          </div>
115
        </div>
116
      </div>
117
    </div>
118
  )
119
}
120
121
export default Account

1
import { useAuth } from '@redwoodjs/auth'
2
import { MetaTags } from '@redwoodjs/web'
3
import Account from 'src/components/Account'
4
import Auth from 'src/components/Auth'
5
6
const HomePage = () => {
7
  const { isAuthenticated } = useAuth()
8
9
  return (
10
    <>
11
      <MetaTags title="Welcome" />
12
      {!isAuthenticated ? <Auth /> : <Account />}
13
    </>
14
  )
15
}
16
17
export default HomePage

1
import { useAuth } from '@redwoodjs/auth'
2
import { useEffect, useState } from 'react'
3
4
const Avatar = ({ url, size, onUpload }) => {
5
  const { client: supabase } = useAuth()
6
7
  const [avatarUrl, setAvatarUrl] = useState(null)
8
  const [uploading, setUploading] = useState(false)
9
10
  useEffect(() => {
11
    if (url) downloadImage(url)
12
  }, [url])
13
14
  async function downloadImage(path) {
15
    try {
16
      const { data, error } = await supabase.storage.from('avatars').download(path)
17
      if (error) {
18
        throw error
19
      }
20
      const url = URL.createObjectURL(data)
21
      setAvatarUrl(url)
22
    } catch (error) {
23
      console.log('Error downloading image: ', error.message)
24
    }
25
  }
26
27
  async function uploadAvatar(event) {
28
    try {
29
      setUploading(true)
30
31
      if (!event.target.files || event.target.files.length === 0) {
32
        throw new Error('You must select an image to upload.')
33
      }
34
35
      const file = event.target.files[0]
36
      const fileExt = file.name.split('.').pop()
37
      const fileName = `${Math.random()}.${fileExt}`
38
      const filePath = `${fileName}`
39
40
      const { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
41
42
      if (uploadError) {
43
        throw uploadError
44
      }
45
46
      onUpload(filePath)
47
    } catch (error) {
48
      alert(error.message)
49
    } finally {
50
      setUploading(false)
51
    }
52
  }
53
54
  return (
55
    <div>
56
      {avatarUrl ? (
57
        <img
58
          src={avatarUrl}
59
          alt="Avatar"
60
          className="avatar image"
61
          style={{ height: size, width: size }}
62
        />
63
      ) : (
64
        <div className="avatar no-image" style={{ height: size, width: size }} />
65
      )}
66
      <div style={{ width: size }}>
67
        <label className="button primary block" htmlFor="single">
68
          {uploading ? 'Uploading ...' : 'Upload'}
69
        </label>
70
        <input
71
          style={{
72
            visibility: 'hidden',
73
            position: 'absolute',
74
          }}
75
          type="file"
76
          id="single"
77
          accept="image/*"
78
          onChange={uploadAvatar}
79
          disabled={uploading}
80
        />
81
      </div>
82
    </div>
83
  )
84
}
85
86
export default Avatar