From 5eaefe0dd5b5d93321749471cd4b816fbc7d8eef Mon Sep 17 00:00:00 2001
From: Clay Mitchell <clay@pfd.net>
Date: Sun, 18 Dec 2022 17:57:29 -0500
Subject: [PATCH] Update with-react.mdx

- Changed instructions to use .env to .env.local (.env is not in .gitignore by default, whereas .env.local is. process still starts properly with .env.local.
- updated a couple of "edit this filename.js" to "edit this src/filename.js"
- added instructions to specify which files to update for Account.js and supabaseClient.js
- updated the "Add the new widget" src/Account.js sample code to better show where to add Avatar code and fit into existing code
---
 .../getting-started/tutorials/with-react.mdx     | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
index 1f7804f15ab..7d1418b7146 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
@@ -37,7 +37,7 @@ Then let's install the only additional dependency: [supabase-js](https://github.
 npm install @supabase/supabase-js
 ```
 
-And finally we want to save the environment variables in a `.env`.
+And finally we want to save the environment variables in a `.env.local` file.
 All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
 
 ```bash title=.env
@@ -48,6 +48,8 @@ REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
 Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
 on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
 
+Create and edit `src/supabaseClient.js`:
+
 ```js title=src/supabaseClient.js
 import { createClient } from '@supabase/supabase-js'
 
@@ -64,6 +66,8 @@ You can find the full contents of this file [here](https://raw.githubusercontent
 
 Let's set up a React component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
 
+Create and edit `src/Auth.js`:
+
 ```jsx title=src/Auth.js
 import { useState } from 'react'
 import { supabase } from './supabaseClient'
@@ -120,7 +124,7 @@ export default function Auth() {
 
 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`.
+Let's create a new component for that called `src/Account.js`.
 
 ```jsx title=src/Account.js
 import { useState, useEffect } from 'react'
@@ -234,7 +238,7 @@ export default Account
 
 ### Launch!
 
-Now that we have all the components in place, let's update `App.js`:
+Now that we have all the components in place, let's update `src/App.js`:
 
 ```jsx title=src/App.js
 import './index.css'
@@ -282,6 +286,8 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
 
 Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
 
+Create and edit `src/Avatar.js`:
+
 ```jsx title=src/Avatar.js
 import { useEffect, useState } from 'react'
 import { supabase } from './supabaseClient'
@@ -367,7 +373,7 @@ export default function Avatar({ url, size, onUpload }) {
 
 ### Add the new widget
 
-And then we can add the widget to the Account page:
+And then we can add the widget to the Account page at `src/Account.js`:
 
 ```jsx title=src/Account.js
 // Import the new component
@@ -376,7 +382,7 @@ import Avatar from './Avatar'
 // ...
 
 return (
-  <div className="form-widget">
+  <form onSubmit={updateProfile} className="form-widget">
     {/* Add to the body */}
     <Avatar
       url={avatar_url}