Files
Nik Richers 032a368221 fix(docs): overhaul Ionic Vue tutorial auth flow and example app (#47142)
## I have read the CONTRIBUTING.md file.
YES

## What kind of change does this PR introduce?
Bug fix, docs update

Closes DOCS-353.

## What is the current behavior?
- Linear item: Overhaul Ionic Vue tutorial
- Debug email shown on login page after submit
- Login redirect / route guard issues
- Email missing on account page
- HTML5 `type="url"` blocks profile update for `example.com`
- Tutorial `.env` used `VUE_APP_SUPABASE_KEY` but app expects
`VUE_APP_SUPABASE_PUBLISHABLE_KEY`

## What is the new behavior?
- Removed debug `<p>{{ email }}</p>` from Login.vue
- Route guards in `router/index.ts`; simplified App.vue user sync
- Account email from `getClaims()`; website `type="text"`;
`useIonRouter` for logout
- Store typed as `User | null`
- Tutorial MDX env var fixed
- Audit skills moved to
[supabase/docs-agent-skills](https://github.com/supabase/docs-agent-skills):
[`audit-ionic-vue-tutorial`](https://github.com/supabase/docs-agent-skills/blob/main/.claude/skills/audit-ionic-vue-tutorial/SKILL.md),
[`audit-docs-tutorials`](https://github.com/supabase/docs-agent-skills/blob/main/.claude/skills/audit-docs-tutorials/SKILL.md)
— both require **live Supabase platform** E2E (not just build/lint)

**Tutorial preview:** [Build a User Management App with Ionic
Vue](https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-vue)


## Additional context
- Verification (author): `npm install && npm run build` — **pass**
(warnings only)
- E2E: profiles migration applied to project `moijyfpvgnmgoxvwcikq`; add
`.env` from `.env.example` with publishable key for full auth flow test

### Test plan
- [ ] `cd examples/user-management/ionic-vue-user-management && npm
install && npm run build`
- [ ] Confirm tutorial MDX `.env` uses
`VUE_APP_SUPABASE_PUBLISHABLE_KEY`
- [ ] Copy Project URL + publishable key into `.env`
- [ ] `npm run dev` — login page shows no email after magic-link submit
- [ ] Magic link redirects to `/account`
- [ ] Email displays on account page
- [ ] Update profile with `example.com` and `https://example.com` — both
save
- [ ] Logout returns to `/`; `/account` blocked without auth
- [ ] Install audit skills from
[docs-agent-skills](https://github.com/supabase/docs-agent-skills) (`ln
-sf
~/GitHub/supabase/docs-agent-skills/.claude/skills/audit-ionic-vue-tutorial
~/.claude/skills/audit-ionic-vue-tutorial` and same for
`audit-docs-tutorials`), then run
[audit-ionic-vue-tutorial](https://github.com/supabase/docs-agent-skills/blob/main/.claude/skills/audit-ionic-vue-tutorial/SKILL.md)
platform E2E (magic link, profile update verified via SQL)
- [ ] Run
[audit-docs-tutorials](https://github.com/supabase/docs-agent-skills/blob/main/.claude/skills/audit-docs-tutorials/SKILL.md)
— confirm platform E2E column is filled for with-ionic-vue


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Improved authentication handling in the Ionic Vue user-management
example, with smoother sign-in/sign-out redirects and account access
checks.
  * Updated account details to display the user’s email more reliably.

* **Bug Fixes**
* Adjusted navigation so authenticated users are routed to the account
page and unauthenticated users are sent back to the home page.

* **Documentation**
* Updated setup instructions and example environment variables for the
Supabase integration.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Nik Richers <nik@validmind.ai>
2026-06-26 09:17:33 -07:00
..