Hi, I have implemented authentication following your examples (except in js rather than ts). I want to detect when the user has successfully logged in and from there, call a function which calls my backend api with their access token. However, I am a little confused on how to implement this. You mention this - "_Call the useAuthRedirect hook and pass a function as a callback. That function will be called with an idToken as soon as the cookies are ready, or with null when no id_token was contained in the hash._". I was hoping you could please provide an example?
You should be able to use the example code from the README under [`useAuthRedirect`](https://github.com/dferber90/aws-cognito-next#useauthredirect) or [`pages/token.tsx`](https://github.com/dferber90/aws-cognito-next#pagestokentsx):
In the example it's doing
```js
useAuthRedirect(() => {
router.replace("/");
});
```
but instead you can do
```js
useAuthRedirect(token => {
console.log(token)
});
```
Note that this only works on the `/token` page. If you want to access the token on any other page, you have to use `useAuth` and grab the token from there, like so `const { idToken, accessToken } = useAuth()`.
The implementation of that `useauthRedirect` function is here: https://github.com/dferber90/aws-cognito-next/blob/9f056b2c23211c5b79d011f89511561f2ac55664/src/auth.ts#L282-L292
Let me know if this worked ☺️
Hi, thanks for the explaination and for providing an example! I tried out the code you provided, but the token returns "null" when I print it to the console. I know you mentioned in your README that if the token returned is null then that means it was not provided in the hash. Do you have any idea how I could fix this please?
You'll only have access to the token from there immediately after the redirect when the hash is present. As soon as you the redirect happens, the token will no longer be returned from there. For all other cases you'll need to use the regular hook which should return it as well (iirc).
I am trying to access the token before the redirect url is called, but it is still null. I am doing it from token.js, which is my callback Url too. Am I doing this incorrectly?
```javascript
import React from "react";
import { useRouter } from "next/router";
import { useAuthRedirect } from "../auth.js";
import { useEffect } from 'react';
// When a user comes back from authenticating, the url looks
// like this: /token#id_token=....
// At this point, there will be no cookies yet.
// If we would render any page on the server now,
// it would seem as-if the user is not authenticated yet.
//
// We therefore wait until Amplify has set its cookies.
// It does this automatically because the id_token hash
// is present. Then we redirect the user back to the main page.
// That page can now use SSR as the user will have
// the necessary cookies ready.
export default function Token() {
const router = useRouter();
let url;
useEffect(() => {
url = localStorage.getItem("lastUrl");
})
console.log(url);
useAuthRedirect((token) => {
console.log("TOKEN");
console.log(token);
router.replace(url);
});
return <p>loading..</p>;
}
I just checked [the example app](https://github.com/dferber90/aws-cognito-next-example-app/blob/eced5f2f63c82b3e30d73abaadf6b0f4a77e2365/pages/token.tsx) and it works as expected. I don't understand the issue you are having.
Maybe this fixes your code.
```js
export default function Token() {
const router = useRouter();
useAuthRedirect((token) => {
console.log("TOKEN");
console.log(token);
const url = localStorage.getItem("lastUrl");
router.replace(url || "/");
});
return <p>loading..</p>;
}
```
You will only receive a token from `useAuthRedirect` when your URL looks like this `http://localhost:3000/token#id_token=xxxx&access_token=xxxx&expires_in=3600&token_type=Bearer&state=xxx`.
Okay so I checked my url and it is the same format as you have written. However, I noticed that the url is only that format for a short space of time, then it changes to http://localhost:3000/token without the rest of the variables. Then I can see the 'loading' rendered and the 'TOKEN' string printed in my console. So it seems that 'useAuthRedirect' is being called after the url has changed and can no longer fetch the token from the url. Do you know what could be causing this?
This is intended
> Am 27.03.2021 um 15:22 schrieb Sabeeka Qureshi ***@***.***>:
>
>
> Okay so I checked my url and it is the same format as you have written. However, I noticed that the url is only that format for a short space of time, then it changes to http://localhost:3000/token without the rest of the variables. Then I can see the 'loading' rendered and the 'TOKEN' string printed in my console. So it seems that 'useAuthRedirect' is being called after the url has changed and can no longer fetch the token from the url. Do you know what could be causing this?
>
> —
> You are receiving this because you modified the open/close state.
> Reply to this email directly, view it on GitHub, or unsubscribe.