In this tutorial, you will use Ionic React to create a simple tab-based application with a login screen and secure area, using the Auth Connect React bindings with Auth0 as the auth backend.
Let's start by installing the Ionic CLI and creating a react starter app:
Select the "tabs" starter template:
If you have not already setup Ionic Enterprise in your app, follow the one-time setup steps.
Once Ionic Enterprise is set up, its time to install Auth Connect and the React bindings:
Follow this guide to set up your free Auth0 account
In order to secure our sample app, we'll need to create three extra pages:
- Login Page
- Logout Page
- Callback Page
Let's take a deeper look at some of the properties available to us from the
On the Login page we are destructuring three properties from the hook,
error: contains any error generated during the authentication flow
isAuthenticated: a boolean representing if the user is authenticated or not
login: a function that you call when a user is ready to begin the authentication process (API docs)
These values are stateful, and will automatically update to the current values when they are changed within Auth Connect. When these values are updated, it will trigger a render in the components that consume them.
Here, we are using another function from the
handleLogoutCallback. This hook needs to be called during logout callbacks (API docs).
Another function from
useAuthConnect hook used here is
handleLoginCallback. This hook needs to be called during login callbacks (API docs).
We will also need to create a few components:
- UserInfo - for displaying user information after login
- TabController - for displaying the tab-based interface within a private route
Here we are making use of some user-oriented properties from the hook:
accessToken: the access token for use in authenticated API calls
refreshToken: used to retrieve a new access token
idToken: idToken provides access to data stored the authentication object received from the authentication service provider (the object shape can be defined by providing a type to the useAuthConnect hook)
Remove the original IonTabs container from the main App component and put it into its own component:
With these pages and components created, let's now configure and use AuthConnectProvider.
PrivateRoute from auth-connect-react:
We will also need
@ionic/react, as we will need to supply the provider with different values depending on the platform we are running in.
To control the login flow, will use
AuthConnectProvider to wrap our app's top level routing switch:
You will notice a new route type we are using here,
<PrivateRoute />. PrivateRoute is a convenience component that you can use to protect routes and only allow the user to navigate to them if the user is authenticated. It takes the usual props a normal React Router Route component does, as well as some additional ones:
loginPath: The path to the login screen that will be redirected to if the user is not authenticated. Can also be supplied globally on the AuthConnectProvider. The loginPath is required either globally on AuthConnectProvider or on the individual PrivateRoute. If specified on both, the loginPath on PrivateRoute will be used.
initializingComponent: The component to display while Auth Connect is initializing and determining if the user is authenticated or not. Can also be assigned globally in AuthConnectProvider. When assigned globally, the initializingComponent provided on PrivateRoute will be ignored. If not provided here or on AuthConnectProvider, PrivateRoute will return null when initializing, which will display a blank screen for a brief moment. A loading spinner or some
For more details on the various auth config options that you can use with this provider, view the Auth0 Configuration guide.
AuthConnectContainer into the App component:
You are now ready to test the application! Start the application using
To test out user authentication, tap / click the "Login" button (in desktop browsers, make sure popup windows are not blocked), and then login with a user created on your Auth0 account.
If everything works, you should be redirected to the TabController as a logged in user: