본문으로 건너뛰기

인증0

그만큼@mastra/auth-auth0패키지는 Auth0을 사용하여 Mastra에 대한 인증을 제공합니다. Auth0에서 발급한 JWT 토큰을 사용하여 들어오는 요청을 확인하고 다음을 사용하여 Mastra 서버와 통합합니다.auth옵션.

전제조건
전제조건에 대한 직접 링크

이 예에서는 Auth0 인증을 사용합니다. 다음을 확인하세요.

  1. 다음에서 Auth0 계정을 만드세요.auth0.com
  2. Auth0 대시보드에서 애플리케이션 설정
  3. 식별자(대상)를 사용하여 Auth0 대시보드에서 API를 구성합니다.
  4. 애플리케이션에 허용된 콜백 URL, 웹 원본 및 로그아웃 URL을 구성합니다.
.env
AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_AUDIENCE=your-api-identifier
노트

애플리케이션 > 설정 아래의 Auth0 대시보드에서 도메인을 찾을 수 있습니다. 대상은 Auth0 대시보드 > API에 구성된 API의 식별자입니다.

자세한 설정 지침은 사용 중인 플랫폼에 해당하는 Auth0 빠른 시작을 참조하세요.

설치
설치에 대한 직접 링크

MastraAuthAuth0 클래스를 사용하려면 먼저 @mastra/auth-auth0 패키지를 설치해야 합니다.

npm install @mastra/auth-auth0@latest

사용 예
사용 예에 대한 직접 링크

환경 변수를 사용한 기본 사용법
환경 변수를 사용한 기본 사용법에 대한 직접 링크

src/mastra/index.ts
import { Mastra } from '@mastra/core'
import { MastraAuthAuth0 } from '@mastra/auth-auth0'

export const mastra = new Mastra({
server: {
auth: new MastraAuthAuth0(),
},
})

맞춤 구성
맞춤 구성에 대한 직접 링크

src/mastra/index.ts
import { Mastra } from '@mastra/core'
import { MastraAuthAuth0 } from '@mastra/auth-auth0'

export const mastra = new Mastra({
server: {
auth: new MastraAuthAuth0({
domain: process.env.AUTH0_DOMAIN,
audience: process.env.AUTH0_AUDIENCE,
}),
},
})

구성
구성에 대한 직접 링크

사용자 인증
사용자 인증에 대한 직접 링크

기본적으로 MastraAuthAuth0는 지정된 대상에 유효한 Auth0 토큰을 가진 모든 인증 사용자를 허용합니다. 토큰 검증에서는 다음을 확인합니다.

  1. 토큰이 Auth0에 의해 올바르게 서명되었습니다.
  2. 토큰이 만료되지 않았습니다.
  3. 토큰 대상은 구성된 대상과 일치합니다.
  4. 토큰 발급자가 Auth0 도메인과 일치합니다.

사용자 인증을 맞춤설정하려면 맞춤 설정을 제공하세요.authorizeUser function:

src/mastra/auth.ts
import { MastraAuthAuth0 } from '@mastra/auth-auth0'

const auth0Provider = new MastraAuthAuth0({
authorizeUser: async user => {
// Custom authorization logic
return user.email?.endsWith('@yourcompany.com') || false
},
})

사용 가능한 모든 구성 옵션은 MastraAuthAuth0을 참조하세요.

클라이언트 측 설정
클라이언트 측 설정에 대한 직접 링크

Auth0 인증을 사용하는 경우 Auth0 React SDK를 설정하고, 사용자를 인증하고, Mastra 요청에 전달할 액세스 토큰을 검색해야 합니다.

Auth0 React SDK 설정
Auth0 React SDK 설정에 대한 직접 링크

먼저 애플리케이션에 Auth0 React SDK를 설치하고 구성합니다.

npm install @auth0/auth0-react
src/auth0-provider.tsx
import React from 'react'
import { Auth0Provider } from '@auth0/auth0-react'

const Auth0ProviderWithHistory = ({ children }) => {
return (
<Auth0Provider
domain={process.env.REACT_APP_AUTH0_DOMAIN}
clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
authorizationParams={{
redirect_uri: window.location.origin,
audience: process.env.REACT_APP_AUTH0_AUDIENCE,
scope: 'read:current_user update:current_user_metadata',
}}
>
{children}
</Auth0Provider>
)
}

export default Auth0ProviderWithHistory

액세스 토큰 검색
액세스 토큰 검색에 대한 직접 링크

Auth0 React SDK를 사용하여 사용자를 인증하고 액세스 토큰을 검색합니다.

lib/auth.ts
import { useAuth0 } from '@auth0/auth0-react'

export const useAuth0Token = () => {
const { getAccessTokenSilently } = useAuth0()

const getAccessToken = async () => {
const token = await getAccessTokenSilently()
return token
}

return { getAccessToken }
}
노트

더 많은 인증 방법과 구성 옵션은 Auth0 React SDK 문서를 참조하세요.

구성MastraClient
configuring-mastraclient에 대한 직접 링크

auth가 활성화되면 MastraClient로 보내는 모든 요청의 Authorization 헤더에 유효한 Auth0 액세스 토큰을 포함해야 합니다.

lib/mastra/mastra-client.ts
import { MastraClient } from '@mastra/client-js'

export const createMastraClient = (accessToken: string) => {
return new MastraClient({
baseUrl: 'https://<mastra-api-url>',
headers: {
Authorization: `Bearer ${accessToken}`,
},
})
}
정보

Authorization 헤더에서 액세스 토큰 앞에 Bearer를 붙여야 합니다. 더 많은 구성 옵션은 Mastra Client SDK를 참조하세요.

인증된 요청 만들기
인증된 요청 만들기에 대한 직접 링크

Auth0 액세스 토큰으로 MastraClient를 구성한 후 인증된 요청을 보낼 수 있습니다.

src/components/mastra-api-test.tsx
import React, { useState } from 'react'
import { useAuth0 } from '@auth0/auth0-react'
import { MastraClient } from '@mastra/client-js'

export const MastraApiTest = () => {
const { getAccessTokenSilently } = useAuth0()
const [result, setResult] = useState(null)

const callMastraApi = async () => {
const token = await getAccessTokenSilently()

const mastra = new MastraClient({
baseUrl: 'http://localhost:4111',
headers: {
Authorization: `Bearer ${token}`,
},
})

const weatherAgent = mastra.getAgent('weatherAgent')
const response = await weatherAgent.generate("What's the weather like in New York")

setResult(response.text)
}

return (
<div>
<button onClick={callMastraApi}>Test Mastra API</button>

{result && (
<div className="result">
<h6>Result:</h6>
<pre>{result}</pre>
</div>
)}
</div>
)
}