How to refresh the access token in aws amplify from front end react app ?

Question

We have a react based front end app. It uses amplify in front end to interact with cognito.
We use hosted cognito login page in our react web app.
When we send the access token to backend api backed by API GW which uses cognito to authorize and authenticate.
The issue is sometime the access is getting expired. It looks like the access token is available for 1 hour only.

How do we know whether the token is valid or not in front end code using aws amplify ?
If it is expired, how do we use amplify sdk/api to refresh and get the new token without refreshing the page ?

Note: 
* When we manually refresh the page, it is working. 
* We want to perform the api call make it as a successful api call without asking the user  to manually refresh the page.

Antonio Lagrotteria · Accepted Answer

Hi Navin,

You should just call Auth.currentSession() method, as Amplify will handle that, see this: https://docs.amplify.aws/lib/auth/manageusers/q/platform/js/#retrieve-current-session

Hope it helps and appreciated an accepted answer if so, so that benefits community when searching for similar issues, cheers!

con · Answer

in amplify gen 2 you can retrieve a new token by calling `fetchAuthSession`
i am using angular (with typescript) so you probably have to adapt to your needs.

```
import {fetchAuthSession} from "@aws-amplify/auth";

const authSession = await fetchAuthSession({forceRefresh: true});
```

and recreate your client

```
import {generateClient} from "@aws-amplify/api";
import type {Schema} from "../../../amplify/data/resource";

const accessToken = authSession?.tokens?.accessToken
const options = !!accessToken ? {authToken: accessToken?.toString()} : {}
const client = generateClient(options)
```

How to refresh the access token in aws amplify from front end react app ?

Add your answer

Relevant content