How to access token returned from useAuthRedirect? about aws-cognito-next HOT 9 CLOSED

You should be able to use the example code from the README under useAuthRedirect or pages/token.tsx:

In the example it's doing

  useAuthRedirect(() => {
    router.replace("/");
  });

but instead you can do

  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:

Let me know if this worked ☺️

from aws-cognito-next.

Closing this for now, we can come back to it in case there's a problem with this solution.

from aws-cognito-next.

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?

from aws-cognito-next.

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).

from aws-cognito-next.

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?

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>;
}

from aws-cognito-next.

Hi sorry to bring an old thread alive again, but I was wondering if you had a chance to check this out?

from aws-cognito-next.

I just checked the example app and it works as expected. I don't understand the issue you are having.

Maybe this fixes your code.

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.

from aws-cognito-next.

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?

from aws-cognito-next.

from aws-cognito-next.