Accessing Protected APIs

~2 min

When building applications with ThunderID, you'll often need to call protected APIs that require authentication. This guide shows you how to make authenticated HTTP requests using the ThunderID Vue SDK.

Accessing Protected APIs

Using SDK Built-in HTTP Client

When your application is wrapped with ``, you can use the `useThunderID` composable to access the authenticated `http` module. This module has the following features: - Includes the necessary authentication headers (Bearer token) - Handles token refresh when tokens expire - Provides methods like `request()` and `requestAll()` for making API calls Accessing the HTTP Client You can access the `http` client in two ways: 1. **Inside a component**: Use the `useThunderID` composable to get the `http` instance

   const { http } = useThunderID()

Using a GraphQL Client

If you are not using `webWorker` as the storage type, use the `getAccessToken` function to fetch the access token. Then manually attach the token to the GraphQL client's authentication headers. Storage Type Limitation This approach is not available when the storage type is set to `webWorker`. The SDK automatically manages the access token and does not expose it to the main thread. The following example shows how to configure a GraphQL client with authentication using the access token:

src/graphql/client.ts


export function createAuthenticatedClient(accessToken: string) {
  const httpLink = createHttpLink({
    uri: 'https://localhost:8090/graphql',
  })

  const authLink = setContext((_, { headers }) => ({
    headers: {
      ...headers,
      authorization: accessToken ? `Bearer ${accessToken}` : '',
    },
  }))

  return new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  })
}