Auth0를 사용한 Tauri 앱에 보안 인증 추가: agx의 웹 및 데스크탑 인증 구현
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발, DevOps
대상자
- Tauri 및 SvelteKit 기반의 크로스플랫폼 앱 개발자
- Auth0 인증 시스템을 도입하고자 하는 개발자
- 보안 및 사용자 경험을 고려한 인증 구현을 필요한 팀
핵심 요약
- Auth0 Universal Login과 Tauri의 deep-linking, opener 플러그인을 결합하여 데스크탑 및 웹 모드에서 일관된 인증 경험 제공
- 보안 강화: OAuth 2.0, JWT, secure token storage 활용
- 구성 요소:
- agx://localhost/auth 커스텀 프로토콜 사용
- @auth0/auth0-spa-js SDK 통합
- tauri.conf.json에서 deep-linking 플러그인 설정
섹션별 세부 요약
1. 인트로덕션: agx 앱의 두 가지 모드
- agx는 ClickHouse를 기반으로 빠른 로컬 데이터 처리
- 데스크탑 모드: Tauri 기반의 네이티브 앱
- 웹 모드: 브라우저 기반의 원격 서버 연결
- 인증은 두 모드 모두에서 일관된 경험 제공 필요
2. Auth0 선택 이유
- Seamless SSO: 웹 및 데스크탑에서 호스팅된 로그인 경험 제공
- Cross-Platform Compatibility: SvelteKit 프론트엔드와 Tauri 루스트 기반 백엔드 호환
- 보안: OAuth 2.0, JWT, secure token storage 활용
- 사용성: 호스팅된 Universal Login 페이지의 설정 및 맞춤화 용이
3. Auth0 설정 및 URLs 구성
- Allowed Callback URLs:
- agx://localhost/auth (데스크탑용 커스텀 프로토콜)
- http://localhost:5173 (웹 개발용)
- https://agx.example.com (프로덕션 웹 모드)
- Allowed Logout URLs:
http://localhost:5173,agx://localhost/auth - Web Origins:
- http://localhost:5173, https://agx.example.com (웹)
- tauri://localhost, http://localhost:5173 (데스크탑)
4. Tauri 플러그인 설치 및 설정
- deep-linking 및 opener 플러그인 설치:
```bash
npm run tauri add deep-linking
npm run tauri add opener
```
tauri.conf.json에서deep-linking플러그인 구성:
```json
{
"plugins": {
"deep-linking": {
"desktop": {
"schemes": ["agx"]
}
}
}
}
```
5. Auth0 SPA SDK 통합 및 코드 구현
- SPA SDK 설치:
```bash
npm install @auth0/auth0-spa-js
```
- 환경 변수 사용:
AUTH0_DOMAIN,AUTH0_CLIENT_ID,AUTH0_REDIRECT_URI - 플랫폼별 로그인 처리:
- PLATFORM === "NATIVE": deep-linking 플러그인의 onOpenUrl 활용
- PLATFORM === "WEB": window.location.assign 사용
- 보안 설정:
useRefreshTokens: true로 SPA의 secure token management
결론
- Auth0 Universal Login과 Tauri deep-linking/opener 플러그인 활용으로 데스크탑 및 웹 모드의 일관된 인증 경험 제공
- Web Origins에
tauri://localhost추가로 CORS 문제 해결 - 환경 변수 및 플랫폼별 로직 구현으로 보안 및 유연성 확보
agx리포지토리 참고하여 구현 및 테스트 가능