Instructions for using Authenticator on logged out pages / components?

[paulsingh]

On which framework/platform would you like to see this feature implemented?

Vue

Which UI component is this feature-request for?

Authenticator

Please describe your feature-request in detail.

The Quick Start instructions are great... if you want the entire app locked down. Beyond that... it's not immediately clear to me (and likely others, too) how I could exclude certain pages from Authenticator. (eg, Home, About, etc.)

In the meantime, I've managed to get far enough along with the following (but it doesn't seem like it would be appropriate to use this in a real-world app):

const statePayload = useAuthenticator().state; 
console.log("statePayload = " + JSON.stringify(statePayload, null, 2))
// user = statePayload.context.user
// email = statePayload.context.user.attributes.email

Please describe a solution you'd like.

If someone could write up a little more documentation on how to use Authenticator inside apps that have a need for both authenticated and unauthenticated pages, I'd be happy to try things out and document it further for others.

We love contributors! Is this something you'd be interested in working on?

• 👋 I may be able to implement this feature request.
• ⚠️ This feature might incur a breaking change.

[ErikCH]

HI @paulsingh !

That's a good idea! We definitely don't have much documentation on how to handle apps with multiple routes and pages.

Until we have the docs up you could try a couple things. I'm going to assume you are using vue-router and you have multiple pages in your app. And that you want to redirect pages to a login page if the user isn't logged in.

First go into your router file and add new meta tags for every route you'd like to require Auth. Something like this.

// router file
const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // only authenticated users can create posts
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail,
        // anybody can read a post
        meta: { requiresAuth: false }
      }
    ]
  }
]

(From the official docs)

Then you can setup route guards. Like this

// router file
router.beforeEach(async (to, from, next) => {
  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
  const isAuthenticated = await Auth.currentUserInfo();

 if (requiresAuth && !isAuthenticated) {
    next("/login");
  } else {
    next();
  }
});

You could try using the useAuthenticator hook, but I haven't experimented with it on different routes yet.

If you only have one page, try the useRoute hook and grab the meta information from that, and then check Auth.currentAuthenticatedUser(). If the user isn't logged in you could show a message, and then redirect to the login page. Or just redirect tot he login page.

Let me know if that helps!

-Erik

[Milan-Shah]

@paulsingh As @ErikCH mentioned, please give our useAuthenticator hook a try and let us know if you are still having an issue. You can see our latest release here. It enables useAuthenticator usage outside to access commonly requested authenticator context like user and route. Feel free to open the issue if you are unable to address your problem!