-
+ // {(toc.json as TOCHeader[])
+ // .filter((item) => item.lvl !== 1 && item.lvl <= 3)
+ // .map((item: any, i: number) => {
+ // return (
+ //
- + // + // + // ) + // })} + //
{meta.title}
} +{JSON.stringify({ user, allRepos }, null, 2)};
}
```
+
+export const Page = ({ children }) => `/feed subscribe https://status.supabase.com/history.atom` Make sure to review our [SLA](/docs/company/sla) for details on our commitment to Platform Stability. + +export const Page = ({ children }) =>
-
- )
-}
-```
-
-### Account page
-
-After a user is signed in we can allow them to edit their profile details and manage their account.
-
-Let's create a new component for that called `Account.js`.
-
-```jsx title=src/Account.js
-import { useState, useEffect } from 'react'
-import { supabase } from './supabaseClient'
-
-const Account = ({ session }) => {
- const [loading, setLoading] = useState(true)
- const [username, setUsername] = useState(null)
- const [website, setWebsite] = useState(null)
- const [avatar_url, setAvatarUrl] = useState(null)
-
- useEffect(() => {
- getProfile()
- }, [session])
-
- const getProfile = async () => {
- try {
- setLoading(true)
- const { user } = session
-
- let { data, error, status } = await supabase
- .from('profiles')
- .select(`username, website, avatar_url`)
- .eq('id', user.id)
- .single()
-
- if (error && status !== 406) {
- throw error
- }
-
- if (data) {
- setUsername(data.username)
- setWebsite(data.website)
- setAvatarUrl(data.avatar_url)
- }
- } catch (error) {
- alert(error.message)
- } finally {
- setLoading(false)
- }
- }
-
- const updateProfile = async (e) => {
- e.preventDefault()
-
- try {
- setLoading(true)
- const { user } = session
-
- const updates = {
- id: user.id,
- username,
- website,
- avatar_url,
- updated_at: new Date(),
- }
-
- let { error } = await supabase.from('profiles').upsert(updates)
-
- if (error) {
- throw error
- }
- } catch (error) {
- alert(error.message)
- } finally {
- setLoading(false)
- }
- }
-
- return (
-
-
- Supabase + React
-Sign in via magic link with your email below
- {loading ? ( - 'Sending magic link...' - ) : ( - - )} -
- {loading ? (
- 'Saving ...'
- ) : (
-
- )}
-
-
- )
-}
-
-export default Account
-```
-
-### Launch!
-
-Now that we have all the components in place, let's update `App.js`:
-
-```jsx title=src/App.js
-import './index.css'
-import { useState, useEffect } from 'react'
-import { supabase } from './supabaseClient'
-import Auth from './Auth'
-import Account from './Account'
-
-export default function App() {
- const [session, setSession] = useState(null)
-
- useEffect(() => {
- supabase.auth.getSession().then(({ data: { session } }) => {
- setSession(session)
- })
-
- supabase.auth.onAuthStateChange((_event, session) => {
- setSession(session)
- })
- }, [])
-
- return (
-
- {!session ?
- )
-}
-```
-
-Once that's done, run this in a terminal window:
-
-```bash
-npm start
-```
-
-And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app.
-
-
-
-## Bonus: Profile photos
-
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-
-### Create an upload widget
-
-Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
-
-```jsx title=src/Avatar.js
-import { useEffect, useState } from 'react'
-import { supabase } from './supabaseClient'
-
-export default function Avatar({ url, size, onUpload }) {
- const [avatarUrl, setAvatarUrl] = useState(null)
- const [uploading, setUploading] = useState(false)
-
- useEffect(() => {
- if (url) downloadImage(url)
- }, [url])
-
- const downloadImage = async (path) => {
- try {
- const { data, error } = await supabase.storage.from('avatars').download(path)
- if (error) {
- throw error
- }
- const url = URL.createObjectURL(data)
- setAvatarUrl(url)
- } catch (error) {
- console.log('Error downloading image: ', error.message)
- }
- }
-
- const uploadAvatar = async (event) => {
- try {
- setUploading(true)
-
- if (!event.target.files || event.target.files.length === 0) {
- throw new Error('You must select an image to upload.')
- }
-
- const file = event.target.files[0]
- const fileExt = file.name.split('.').pop()
- const fileName = `${Math.random()}.${fileExt}`
- const filePath = `${fileName}`
-
- let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
-
- if (uploadError) {
- throw uploadError
- }
-
- onUpload(filePath)
- } catch (error) {
- alert(error.message)
- } finally {
- setUploading(false)
- }
- }
-
- return (
-
- 
- {uploading ? (
- 'Uploading...'
- ) : (
- <>
-
-
- )
-}
-```
-
-### Add the new widget
-
-And then we can add the widget to the Account page:
-
-```jsx title=src/Account.js
-// Import the new component
-import Avatar from './Avatar'
-
-// ...
-
-return (
-
-
-
-
- )}
-
- {/* Add to the body */}
- {
- setAvatarUrl(url)
- updateProfile({ username, website, avatar_url: url })
- }}
- />
- {/* ... */}
-
-)
-```
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
diff --git a/apps/docs/pages/guides/with-redwoodjs.mdx b/apps/docs/pages/guides/with-redwoodjs.mdx
index d9ff177fe1b..b173ad9338b 100644
--- a/apps/docs/pages/guides/with-redwoodjs.mdx
+++ b/apps/docs/pages/guides/with-redwoodjs.mdx
@@ -1,14 +1,11 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
-id: with-redwoodjs
-title: 'Quickstart: RedwoodJS'
-description: Learn how to use Supabase in your RedwoodJS App.
-sidebar_label: RedwoodJS
----
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+ id: 'with-redwoodjs',
+ title: 'Quickstart: RedwoodJS',
+ description: 'Learn how to use Supabase in your RedwoodJS App.',
+ sidebar_label: 'RedwoodJS',
+}
## Intro
@@ -782,3 +779,7 @@ At this stage you have a fully functional application!
- Sign in: [app.supabase.com](https://app.supabase.com)
- Learn more about [RedwoodJS](https://redwoodjs.com)
- Visit the [RedwoodJS Discourse Community](https://community.redwoodjs.com)
+
+export const Page = ({ children }) =>