Nuxt 3 이온 커패시터 스타터 앱, Supabase 설정 및 인증 구축 방법
기술 스택
Nuxt - 하이브리드 Vue 프레임워크 - https://v3.nuxtjs.org/
Capacitor - Capacitor를 기존 웹 프로젝트, 프레임워크 또는 라이브러리에 놓습니다. 기존 React, Svelte, Vue(또는 선호하는 웹 프레임워크) 프로젝트를 네이티브 모바일로 변환합니다. - https://capacitorjs.com/
Ionic Framework - 고품질의 크로스 플랫폼 네이티브 및 웹 앱 경험을 구축하기 위한 오픈 소스 모바일 툴킷입니다. JavaScript 및 웹을 사용하여 어디에서나 실행되는 단일 코드 기반으로 더 빠르게 이동하십시오. - https://ionicframework.com/
Supabase - Supabase는 오픈 소스 Firebase 대안입니다. Postgres 데이터베이스, 인증, 인스턴트 API, 실시간 구독 및 스토리지로 프로젝트를 시작하세요. - https://supabase.com/
이것은 Nuxt 3 및 Ionic Capacitor로 모바일 애플리케이션 구축을 시작하는 방법을 안내하는 일련의 비디오입니다. 이 영상에서는 수파베이스 계정 생성 및 인증을 프로젝트에 추가하고 모바일 기기에 배포합니다.
수파베이스 설정
https://app.supabase.io에서 프로젝트 생성
프로젝트 키 및 데이터베이스 URL 가져오기, nuxt 프로젝트 구성에 필요합니다.
SUPABASE_URL , SUPABASE_ANON_KEY Nuxt 3 프로젝트 설정 및 구성
npm install @supabase/supabase-js
.env 파일에서 값을 읽을 수 있습니다.// nuxt.config.ts
import { defineNuxtConfig } from "nuxt";
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
ssr: false,
dir: {
public: "public",
},
runtimeConfig: {
public: {
SUPABASE_URL: process.env.SUPABASE_URL,
SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY,
},
},
});
샘플 .env 형식
SUPABASE_URL= "https://p_ffE-7s6JoHGUMAo.supabase.co"
SUPABASE_ANON_KEY="eyJhbGc.hodygUWbLitlddXjIG9i6XjYO_p_ffE-7s6JoHGUMAo"
Supabase 클라이언트 관리를 위한 플러그인 및 컴포저블 생성
provide 기능을 사용하여 앱 어디에서나 액세스할 수 있는 composable에서 supabase 클라이언트를 사용할 수 있도록 합니다.// plugins/sb-client.ts
export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig();
const supabase = createClient(config.public.SUPABASE_URL, config.public.SUPABASE_ANON_KEY);
// allow us to inject, see composables
// nuxtApp.vueApp.provide('supabase', supabase);
nuxtApp.provide('supabase', supabase);
});
컴포저블
// composables/useSupabase.ts
import type { SupabaseClient } from "@supabase/supabase-js";
export const useSupabase = (): SupabaseClient => {
const app = useNuxtApp();
const supabase = app.$supabase;
if (!app.$supabase) {
console.log('supabase', supabase);
throw new Error("Supabase Not Initialized Properly");
}
return supabase as SupabaseClient;
};
응용 프로그램에서 Supabase 클라이언트 사용
사용된 API
https://supabase.com/docs/reference/javascript/auth-signin
// use composable
const supabase = useSupabase();
// make api call
const { user, session, error } = await supabase.auth.signIn({
email: '[email protected]',
password: 'example-password',
})
https://supabase.com/docs/reference/javascript/auth-signup
// use composable
const supabase = useSupabase();
// make api call
const { user, session, error } = await supabase.auth.signUp({
email: '[email protected]',
password: 'example-password',
})
https://supabase.com/docs/reference/javascript/auth-signout
const { error } = await supabase.auth.signOut()
Nuxt 코드에서 특정 경로 보호
미들웨어
상태 정보에 액세스하는 방법은 아래의 middleware 섹션에서 확인할 수 있습니다. 페이지는 렌더링 전에 실행할 미들웨어를 지정할 수 있습니다. 렌더링하기 전에 미들웨어를 사용하여 사용자를 확인하려면 보호된 페이지가 필요합니다. 미들웨어는 사용자를 사용 가능한 supabase 사용자가 없다는 로그인 페이지로 안내합니다.
// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
const client = useSupabase();
if (!client.auth.user()) {
return "/login";
}
})
페이지에 추가되면 페이지가 렌더링되기 전에 미들웨어가 호출됩니다. 사용자가 인증되지 않은 경우 로그인 페이지로 다시 리디렉션됩니다.
definePageMeta({
middleware: ["auth"]
})
색인 페이지 - index.vue
<template>
<IonPage>
<IonHeader :translucent="true">
<IonToolbar>
<IonTitle>Home</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent class="ion-padding">
<h1>WELCOME HOME on IOS AND ANDROID</h1>
<IonButton @click="router.push('/about')">
Goto About Page
</IonButton>
<IonButton @click.prevent="doSignOut">
SIGN OUT
</IonButton>
<p>
{{user}}
</p>
</IonContent>
</IonPage>
</template>
<script setup lang="ts">
import {
IonPage,
IonHeader,
IonTitle,
IonToolbar,
IonContent,
IonButton
} from "@ionic/vue"
definePageMeta({
middleware: ["auth"]
})
const router = useRouter();
const client = useSupabase()
const user = client.auth.user();
// function
const doSignOut = async () => {
await client.auth.signOut();
router.replace("/login");
}
</script>
로그인 페이지 - login.vue
<template>
<IonPage>
<IonHeader :translucent="true">
<IonToolbar>
<IonTitle>LOGIN PAGE</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent class="ion-padding">
<IonItem>
<IonLabel position="floating">
EMAIL
</IonLabel>
<IonInput type="email" placeholder="Email" v-model="credentials.email"></IonInput>
</IonItem>
<IonItem>
<IonLabel position="floating">
PASSWORD
</IonLabel>
<IonInput type="password" placeholder="*****" v-model="credentials.password"></IonInput>
</IonItem>
<IonButton @click.prevent="doSignIn">
SIGN IN
</IonButton>
<IonButton @click.prevent="$router.push('/create-account')">
CREATE ACCOUNT
</IonButton>
</IonContent>
</IonPage>
</template>
<script setup lang="ts">
import {
IonPage,
IonHeader,
IonTitle,
IonToolbar,
IonContent,
IonButton,
IonItem,
IonInput,
IonLabel,
alertController
} from "@ionic/vue"
const router = useRouter();
const sbClient = useSupabase();
// local state
const credentials = ref<{ email: string, password: string }>({ email: "", password: "" })
// functions
const doSignIn = async () => {
const { email, password } = credentials.value
// make api call
const { user, session, error } = await sbClient.auth.signIn({
email,
password,
})
if (error) {
//https://ionicframework.com/docs/api/alert
const alert = await alertController
.create({
header: 'Error Alert',
subHeader: 'Error Signing In To Supabase',
message: error.message,
buttons: ['OK'],
});
await alert.present();
} else {
const alert = await alertController
.create({
header: 'Success',
subHeader: 'User Logged In To Supabase',
buttons: ['OK'],
});
await alert.present();
console.log(user);
router.replace("/");
}
}
</script>
소스 코드
github 저장소의 "Part-3"브랜치에 있는 이 코드
아론크사운더스 / 이온 커패시터-nuxt-비디오-앱
이온 커패시터 VueJS Nuxt3 스타터 템플릿
이온 커패시터 VueJS Nuxt3 Supabase 스타터 템플릿
각 비디오의 코드
시리즈의 각 비디오에 대해 별도의 분기가 있습니다.
자세한 내용은 nuxt 3 documentation을 참조하십시오.
설정
종속 항목을 설치해야 합니다.
# yarn yarn install # npm npm install # pnpm pnpm install --shamefully-hoist
개발 서버
http://localhost:3000에서 개발 서버 시작
npm run dev
생산
프로덕션용 애플리케이션 빌드:
npm run build
프로덕션 빌드를 로컬에서 미리 보기:
npm run preview
자세한 내용은 deployment documentation을 확인하십시오.
View on GitHub
Reference
이 문제에 관하여(Nuxt 3 이온 커패시터 스타터 앱, Supabase 설정 및 인증 구축 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aaronksaunders/how-to-build-a-nuxt-3-ionic-capacitor-starter-app-supabase-setup-and-authentication-3gd0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
