mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Danny White
24be387cdb
## What kind of change does this PR introduce? Docs update. Aligns documentation and style guides with the **Sign in / Sign out / Sign up** platform standard. Closes DOCS-1328. Related to [#49874](https://github.com/supabase/supabase/pull/49874). ## What is the current behavior? Docs style guides prefer _login_ / _log in_. Guide prose uses mixed login and sign in wording. ## What is the new behavior? - [WORD_LIST.md](apps/docs/WORD_LIST.md) and [copywriting.mdx](apps/design-system/content/docs/copywriting.mdx) document the sign in standard - Design-system auth examples updated - Guide prose and API reference spec descriptions updated ### Terminology **Standard:** Use _sign in_, _sign out_, and _sign up_ as verbs. Use _sign-in_, _sign-out_, and _sign-up_ as nouns and adjectives. Match Studio UI labels (**Sign in**, **Sign out**, **Sign up**). **Preserved intentionally:** | Category | Keep as-is | Example | | -------- | ---------- | ------- | | Feature name | social login | `/social-login`, `features.mdx` heading, OAuth provider section | | URL slugs | `login` in paths | `/phone-login`, `/login-flows`, `choosing-login-flow` | | CLI | `supabase login` / `supabase logout` | Reference ids `supabase-login` / `supabase-logout`; executable commands unchanged | | SDK methods | `logout()` | Kotlin/Swift method names in API reference titles and examples | | Third-party UI | Provider product labels | Facebook Login, Kakao Login, portal **Login** buttons | | Postgres | Database terminology | login privileges, login credentials, login via role | | Audit/logging | Log prose | "Generates the following **log** in the Postgres Logs" | | Code and routes | Paths and filenames | `app/login/`, `Login.tsx`, `demos/android-login` | | External URLs | Third-party login pages | `dash.cloudflare.com/login`, `console.neon.tech/login`, `vercel.com/login` | | API identifiers | Event and field names | Audit actions `login`/`logout`, `should_logout_user` | ## To test - Run `pnpm lint:mdx` in `apps/docs` - Spot-check `features.mdx`, `social-login.mdx`, and a provider guide (e.g. Facebook, Kakao) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Standardized authentication terminology across guides, reference material, CLI documentation, and copywriting guidance using “sign in,” “sign out,” and “sign up.” * Updated authentication instructions, headings, link text, examples, and SSO guidance for clearer, more consistent wording. * Corrected related grammar, spelling, hyphenation, and documentation links while preserving established product names and implementation commands. * **Style** * Refined code examples with consistent import ordering and spacing. * **Examples** * Updated authentication button and menu labels to “Sign in” and “Sign out.” <!-- end of auto-generated comment: release notes by coderabbit.ai -->
144 lines
4.2 KiB
Plaintext
144 lines
4.2 KiB
Plaintext
---
|
|
title: 'Build a User Management App with Ionic React'
|
|
description: 'Learn how to use Supabase in your Ionic React App.'
|
|
---
|
|
|
|
<$Partial path="quickstart_intro.mdx" />
|
|
|
|
|
|
|
|
<Admonition type="note">
|
|
|
|
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/ionic-react-user-management).
|
|
|
|
</Admonition>
|
|
|
|
<$Partial path="project_setup.mdx" variables={{ "framework": "ionicreact", "tab": "mobiles" }} />
|
|
|
|
## Building the app
|
|
|
|
Start building the React app from scratch.
|
|
|
|
### Initialize an Ionic React app
|
|
|
|
Use the [Ionic CLI](https://ionicframework.com/docs/cli) to initialize
|
|
an app called `supabase-ionic-react`:
|
|
|
|
```bash
|
|
npm install -g @ionic/cli
|
|
ionic start supabase-ionic-react blank --type react
|
|
cd supabase-ionic-react
|
|
```
|
|
|
|
Install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
|
|
|
|
```bash
|
|
npm install @supabase/supabase-js
|
|
```
|
|
|
|
Save the environment variables in a `.env`. You need the API URL and the key that you copied [earlier](#get-api-details).
|
|
|
|
<$CodeTabs>
|
|
|
|
```bash name=.env
|
|
VITE_SUPABASE_URL=YOUR_SUPABASE_URL
|
|
VITE_SUPABASE_KEY=YOUR_SUPABASE_KEY
|
|
```
|
|
|
|
</$CodeTabs>
|
|
|
|
With the API credentials in place, create a helper file to initialize the Supabase client. These variables will be exposed
|
|
in the browser, which is safe because they use a restricted publishable key and the SQL quickstart enables [Row Level Security](/docs/guides/auth#row-level-security) on the `profiles` table.
|
|
|
|
<$CodeSample
|
|
path="/user-management/ionic-react-user-management/src/supabaseClient.ts"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/supabaseClient.ts"
|
|
/>
|
|
|
|
### Set up a sign-in route
|
|
|
|
Set up a React component to manage sign-ins and sign-ups which uses Magic Links, so users can sign in with their email without using passwords.
|
|
|
|
<$CodeSample
|
|
path="/user-management/ionic-react-user-management/src/pages/Login.tsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/pages/Login.tsx"
|
|
/>
|
|
|
|
### Account page
|
|
|
|
After a user signs in, they should be able to edit their profile details and manage their account.
|
|
|
|
Create a new component for that called `Account.tsx`.
|
|
|
|
<$CodeSample
|
|
path="/user-management/ionic-react-user-management/src/pages/Account.tsx"
|
|
lines={[[1, 15], [17, 124], [129, -1]]}
|
|
meta="name=src/pages/Account.tsx"
|
|
/>
|
|
|
|
### Launch!
|
|
|
|
Now that you have all the components in place, update `App.tsx`:
|
|
|
|
<$CodeSample
|
|
path="/user-management/ionic-react-user-management/src/App.tsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/App.tsx"
|
|
/>
|
|
|
|
Once that's done, run this in a terminal window:
|
|
|
|
```bash
|
|
ionic serve
|
|
```
|
|
|
|
Then open your browser to the URL printed by `ionic serve` (by default, [http://localhost:8100](http://localhost:8100)) 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
|
|
|
|
First install two packages in order to interact with the user's camera.
|
|
|
|
```bash
|
|
npm install @ionic/pwa-elements @capacitor/camera
|
|
```
|
|
|
|
[Capacitor](https://capacitorjs.com) is a cross platform native runtime from Ionic that enables web apps to be deployed through the app store and provides access to native device API.
|
|
|
|
Ionic PWA elements is a companion package that will polyfill certain browser APIs that provide no user interface with custom Ionic UI.
|
|
|
|
With those packages installed update `index.tsx` to include an additional bootstrapping call for the Ionic PWA Elements.
|
|
|
|
<$CodeSample
|
|
path="/user-management/ionic-react-user-management/src/index.tsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/index.tsx"
|
|
/>
|
|
|
|
Then create an `AvatarComponent`.
|
|
|
|
<$CodeSample
|
|
path="/user-management/ionic-react-user-management/src/components/Avatar.tsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/components/Avatar.tsx"
|
|
/>
|
|
|
|
### Add the new widget
|
|
|
|
And then add the widget to the Account page:
|
|
|
|
<$CodeSample
|
|
path="/user-management/ionic-react-user-management/src/pages/Account.tsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/pages/Account.tsx"
|
|
/>
|
|
|
|
At this stage you have a fully functional application!
|