SkillHubi sisselogimine — arendaja juhend

See dokument kirjeldab, kuidas arenduses SkillHubi igal platvormil sisse logida, ja võlulingi (magic link) ajutist lahendust, mida kasutatakse, kuni saatja domeen pole veel Resendis kinnitatud.

1. Voog ülevaates

mobiilirakendus     skillhub-app.pages.dev          postkast / KV
  │  sisesta e-post       │                             │
  │ ───────────────────── │                             │
  │                       │  POST /api/auth/...         │
  │                       │  → mailer.sendMagicLink     │
  │                       │  ─────────────────────────► │
  │                       │  (peegeldab lingi ka KV-sse,│
  │                       │   kui MAGIC_LINK_DEV_MODE=1)│
  │                       │                             │
  │   kasutaja avab lingi süsteemibrauseris             │
  │                       │ GET /api/auth/native-bridge │
  │                       │ → vermib OTT, suunab ümber: │
  │                       │   skillhub://auth/callback  │
  │ ◄────────────────────┘  ?ott=…                      │
  │  appUrlOpen kuulaja → oneTimeToken.verify           │
  │  set-auth-token salvestatud → Pinia user täidetud   │
  │  router.replace('/tabs/home')                       │

Veebiäpp kasutab tavalisi küpsisepõhiseid sessioone ega puuduta OTT silda — ta tarbib võlulingi samas brauseri vahekaardis.

2. Veeb (brauser)

cd apps/web
pnpm dev          # → http://localhost:3000

Klõpsa paremas ülanurgas Logi sisse.
Sisesta e-post lehel /login.
Ava võlulink oma postkastist (või arendusliku väljastuse kaudu, vt §5).
Maandud lehele /welcome koos sessiooniküpsisega.

3. iOS — Xcode'i simulaator või seade

cd apps/mobile
pnpm build && pnpm exec cap sync ios
pnpm exec cap open ios     # avab Xcode

Xcode'is: vali simulaator (iPhone 16 Pro on Galaxy S25 saareekraani paigutusele lähim vaste). Vajuta ▶︎.

Rakendus käivitub aknas /tabs/home ja näitab välja logitud CTA-d.
Toksa Logi sisse → sisesta e-post → toksa Saada sisselogimislink.
Ava võlulink Mobile Safaris (või kleebi see §5-st).
Safari pöördub /api/auth/native-bridge poole, mis suunab aadressile skillhub://auth/callback?ott=…. iOS küsib, kas avada SkillHub; luba.
Pinia salv tarbib OTT ja suunab sind aknasse /tabs/home.

VITE_API_BASE_URL vaikimisi on https://skillhub-app.pages.dev. Vajadusel sea see failis apps/mobile/.env.local, et osutada kohalikule Wrangleri arendus-API-le.

4. Android — Android Studio (sh. Galaxy S25 emuleerimine)

Vaikimisi AVD-loendis on ainult Pixeli seadmed. Galaxy S25 Ultra profiili saamiseks:

Android Studio → Tools → Device Manager → Create Device.
Vali Phone → Pixel 8 Pro (6,7" 1344×2992 ekraan — lähim S25 Ultra 1440×3120 suhtele) ja nimeta AVD ümber Galaxy S25 Ultra.
Vali süsteemitõmmis API 35 (Android 15), sama põlvkond, millele One UI 7 ehitati. One UI-d AVD-le seaduslikult paigaldada ei saa; kasuta stock Android 15 — see paljastab samad API-d, millega rakendus suhtleb.

Käivita rakendus:

cd apps/mobile
pnpm build && pnpm exec cap sync android
pnpm exec cap open android   # või: pnpm exec cap run android

Sisselogimisvoog on identne iOS-iga, ainult et võlulingi ümbersuunamine maandub Chrome'is ja Android pakub SkillHubi avamist skillhub:// skeemi kaudu.

5. Võlulingi arendusväljastus (KV peegel)

Kuni Resendi saatedomeen on kinnitamata, peegeldab mailer.sendMagicLink() väljastatud lingi KV-sse võtme magic-link:<email> alla 15-minutilise TTL-iga. Tõmba see välja:

curl -H "X-Seed-Token: $SEED_TOKEN" \
  "https://skillhub-app.pages.dev/api/dev/magic-link?email=sina@nait.ee"

Vastus:

{ "ok": true, "email": "sina@nait.ee",
  "url": "https://skillhub-app.pages.dev/api/auth/...?token=...",
  "issuedAt": 1714060800000 }

Ava url selle seadme süsteemibrauseris, kus rakendus jookseb, et süvalingi üleandmine töötaks. Kui kleebid selle Capacitori WebView'sse endasse, ei käivitu OTT sild.

Otsapunkti kaitseb SEED_TOKEN (Pages → Settings → Environment Variables). Roteeri või eemalda see, kui Resendi domeen on kinnitatud ja MAGIC_LINK_DEV_MODE eemaldatud.

6. Vajalikud keskkonnamuutujad (Cloudflare Pages)

Võti	Kus	Otstarve
`BETTER_AUTH_SECRET`	Pages	Sessiooni/JWT allkirjastamine
`RESEND_API_KEY`	Pages	Päris e-posti saatmine
`MAGIC_LINK_DEV_MODE`	Pages (`1`)	Peegeldab lingid KV-sse; ei kasuta Resendi
`SEED_TOKEN`	Pages	Kaitseb `/api/dev/` ja `/api/admin/`
`VITE_API_BASE_URL`	mobile build	Suunab WebView'i API päritolu suunas

7. WebView'i silumine

Capacitori WebView on lihtsalt Safari (iOS) või Chrome (Android), seega saad jooksva rakenduse külge ühendada täisväärtusliku DevToolsi sessiooni.

iOS — Safari Web Inspector

Seadmes või simulaatoris: Settings → Safari → Advanced → lülita sisse Web Inspector.
Macis: Safari → Settings → Advanced → lülita sisse Show features for web developers.
Käivita rakendus Xcode'ist (silumiskoosted paljastavad WebView'i; TestFlight ja App Store'i koosted seda ei tee).
Safaris: menüüriba → Develop → [Sinu seade] → SkillHub. Avaneb tavaline DevToolsi aken WebView'i kohal.

Nüüd saad:

Vaadata DOM-i — kontrolli, et <ion-input> on tegelikult renderdatud ja selle kõrgus pole null.
Lugeda Console'i Vue/Pinia vigade osas, mida iOS-i logi alla neelab (UIScene / RTIInputSystemClient read Xcode'is on müra, mitte vead).
Jälgida Network'i osas /api/auth/... päringuid ja kontrollida, et VITE_API_BASE_URL osutab sinna, kuhu eeldad.
Käivitada konsoolis document.querySelector('ion-input').shadowRoot, et uurida Ionicu varju-DOM-i, kui sisestus on nähtamatu — see tähendab tavaliselt, et märgistuses on veel vana sildi-ümbristamise muster; vaheta see vastu <IonInput :label="…" fill="outline" /> (Ionic 8 moodne API).

Android — Chrome DevTools

Seadmes: lülita sisse Developer options → USB debugging.
Ühenda see Maciga/PC-ga; nõustu RSA sõrmejälje viibaga.
Ava Chrome → chrome://inspect/#devices.
Leia SkillHub Remote Target all ja klõpsa inspect.

DevToolsi liides on identne lauaarvuti Chrome'i sessiooniga ja töötab nii päris seadmete kui ka emulaatori AVD-de vastu.

Mida vaadata, kui "Logi sisse" viib tühjale ekraanile

Sümptom DevToolsis	Tõenäoline põhjus
`<ion-content>` on renderdatud, aga `height: 0`	Marsruudikomponendis puudub `IonPage` ümbris
`<ion-input>` on olemas, aga visuaalselt tühi	Vana `<label><IonInput/></label>` muster iOS-il
Marsruut muutus, aga DOM näitab endist vaadet	`IonRouterOutlet` pole haagitud (vaata `App.vue` kesta)
Console: `Cannot read properties of undefined`	Pinia salv pole initsialiseeritud; vaata `main.ts` järjekorda

8. Tõrkeotsing

"Logi sisse" maandub tühjal ekraanil — tavaliselt tähendab see, et IonHeader kasutas collapse="fade" ilma sidustatud suure tiitli kondenstoolribata. Parandatud failis AppScreen.vue; ehita uuesti + cap sync, kui näed seda vanemal komplektil.
E-post ei saabu kunagi — kontrolli MAGIC_LINK_DEV_MODE. Kui 1, kasuta §5-te. Kui 0 ja Resend on seadistatud, kontrolli Resendi juhtpaneeli.
Süvalink ei ava rakendust — kontrolli, et skillhub:// on registreeritud failis apps/mobile/ios/App/App/Info.plist (CFBundleURLSchemes) ja failis apps/mobile/android/app/src/main/AndroidManifest.xml (<data android:scheme="skillhub" />). cap sync taasloob need failist capacitor.config.ts.