Accessing Protected APIs

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

Using SDK Built-in HTTP Client

When your application is wrapped with AsgardeoProvider, you can use the useAsgardeo hook 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

There are two ways to access the http client:

1. Inside a component: Use the useAsgardeo hook to get the http instance

   const { http } = useAsgardeo()

2. Outside a component (e.g., in utility functions or services): Import http directly

   import { http } from '@asgardeo/react'

Basic API Request

The following examples demonstrate how to use the Asgardeo SDK's http module to call a protected API endpoint.

Using the Hook Inside a Component

src/UserProfile.jsx

import React, { useEffect, useState } from 'react'
import { useAsgardeo } from '@asgardeo/react'

export default function UserProfile() {
  const { http, isSignedIn } = useAsgardeo()
  const [userData, setUserData] = useState(null)

  useEffect(() => {
    if (!isSignedIn) {
      return
    }

    (async () => {
      try {
        const response = await http.request({
          url: 'https://localhost:8090/users/<user_id>',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          method: 'GET',
        })

        setUserData(response.data)
      } catch (error) {
        console.error('Error fetching user data:', error)
      }
    })()
  }, [http, isSignedIn])

  if (!isSignedIn) {
    return <div>Please sign in to view your profile.</div>
  }

  return (
    <div>
      <h2>User Profile</h2>
      {userData && <pre>{JSON.stringify(userData, null, 2)}</pre>}
    </div>
  )
}

Using Direct Import Outside a Component

src/services/userService.js

import { http } from '@asgardeo/react'

export async function fetchUser(userId) {
  try {
    const response = await http.request({
      url: `https://localhost:8090/users/${userId}`,
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      method: 'GET',
    })

    return response.data
  } catch (error) {
    console.error('Error fetching user:', error)
    throw error
  }
}

src/UserProfile.jsx

import React, { useEffect, useState } from 'react'
import { useAsgardeo } from '@asgardeo/react'
import { fetchUser } from './services/userService'

export default function UserProfile() {
  const { isSignedIn } = useAsgardeo()
  const [userData, setUserData] = useState(null)

  useEffect(() => {
    if (!isSignedIn) {
      return
    }

    (async () => {
      try {
        const data = await fetchUser('<user_id>')
        setUserData(data)
      } catch (error) {
        console.error('Error loading user data:', error)
      }
    })()
  }, [isSignedIn])

  if (!isSignedIn) {
    return <div>Please sign in to view your profile.</div>
  }

  return (
    <div>
      <h2>User Profile</h2>
      {userData && <pre>{JSON.stringify(userData, null, 2)}</pre>}
    </div>
  )
}

API Configuration

Replace <user_id> with the actual user ID you want to fetch. The Thunder API server runs on https://localhost:8090 by default.

Storage Type Requirement

The storage type must be set to webWorker for the token to be automatically attached. If it's set to sessionStorage or localStorage, you may implement your own function for attaching the access token to the network request.

warning

Note that you don't need to manually specify the Authorization header, as the http function intercepts the request and attaches the access token automatically. The final request config sent by the http function would be:

Parallel API Requests

In case you want to send multiple API requests in parallel, you can use the httpRequestAll function to simultaneously trigger parallel network requests and receive responses after all network requests are completed.

The following code snippet shows how to send multiple network requests in parallel:

src/UserProfile.jsx

import React, { useEffect, useState } from 'react'
import { useAsgardeo } from '@asgardeo/react'

export default function UserProfile() {
  const { http, isSignedIn } = useAsgardeo()
  const [ userData, setUserData ] = useState({
    profile: null,
    applications: [],
  })

  useEffect(() => {
    if (!isSignedIn) {
      return
    }

    const requests = []

    requests.push({
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      method: 'GET',
      url: 'https://localhost:8090/users/<user_id>',
    })

    requests.push({
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      method: 'GET',
      url: 'https://localhost:8090/applications',
    })

    (async () => {
      try {
        const response = await http.requestAll(requests)

        setUserData({
          profile: response[0].data,
          applications: response[1].data,
        })
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    })()
  }, [http, isSignedIn])

  return <pre>{JSON.stringify(userData, null, 4)}</pre>
}

Using a GraphQL Client

In case you are not using the webWorker as the storage type, the getAccessToken function can be used to fetch the access token and manually attach it to the GraphQL client's authentication headers.

Storage Type Limitation

This approach is not available when the storage type is set to webWorker, as the access token is automatically managed by the SDK and not exposed to the main thread.

The following example shows how to configure a GraphQL client with authentication using the access token:

src/graphql/client.js

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'
import { setContext } from '@apollo/client/link/context'

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

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

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

src/UserProfile.jsx

import React, { useEffect, useState } from 'react'
import { useAsgardeo } from '@asgardeo/react'
import { gql } from '@apollo/client'
import { createAuthenticatedClient } from './graphql/client'

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      email
      username
      firstName
      lastName
    }
  }
`

export default function UserProfile() {
  const { isSignedIn, getAccessToken } = useAsgardeo()
  const [userData, setUserData] = useState(null)

  useEffect(() => {
    if (!isSignedIn) {
      return
    }

    (async () => {
      try {
        const accessToken = await getAccessToken()
        const client = createAuthenticatedClient(accessToken)

        const { data } = await client.query({
          query: GET_USER,
          variables: { id: '<user_id>' },
        })

        setUserData(data.user)
      } catch (error) {
        console.error('Error fetching user data:', error)
      }
    })()
  }, [isSignedIn, getAccessToken])

  if (!isSignedIn) {
    return <div>Please sign in to view your profile.</div>
  }

  return (
    <div>
      <h2>User Profile</h2>
      {userData && <pre>{JSON.stringify(userData, null, 2)}</pre>}
    </div>
  )
}

tip

Replace <user_id> with the actual user ID you want to fetch. This example uses Apollo Client, but you can apply the same pattern with other GraphQL clients like urql or graphql-request.