Amplify-js: Is it possible to use Authenticator for app with both authenticated and un-authenticated pages?

[cdellinger]

When using Authenticator in a react app, is it possible to utilize it in such a way that you can specify some pages as requiring authentication and other pages as not requiring it? Ideally I was hoping to be able to wrap pages requiring authentication within my app.js inside the router. If there is such a capability, is there an example of this being done somewhere? All the examples I've found to date authenticate all pages.

[mwarger]

Yes, this is possible. You can place the <Authenticator> component on any page and use it to authenticate. Then, you can use the onStateChange() prop to set a variable when the user has signed in, and utilize that state throughout your app (or routes) to control access.

When you app initiailizes, you can use await Auth.currentCredentials() to see if there is an authenticated user and set your application state accordingly (there is an authenticated property you can use to flag this).

[mwarger]

@cdellinger - If it helps, I've written an article about this situation here

Perhaps it can help others that come across this issue.