http://localhost:4000/auth-redirectto Authorize Redirect URIs.
http://localhost:4000/to Post Logout Redirect URIs.
viteas the build tool and the
vue-routerpackage. Also, we will use TypeScript in this tutorial.
vite.config.tsfile, modify the file with the following lines:
npm run dev, the server will be running on port 4000.
src/componentsfolder with simply showing
Hello Worldon the screen.
App.vuefile is generated by
Vitealready but some sections might not being needed for this tutorial.
npm run devnow to run the project and you will see default page with the title
Vite + Vueand a count button on
AuthReditect.vuefile in the
src/componentsfolder with the same content as
src/components/Home.vueat this moment.
src/folder. We will import
AuthRedirectcomponent as the route and we will implement these components later. The content of this file will look like this:
authgearand call the
configurefunction to initialize an Authgear instance on application loads. We will also import
routerand use it to build routes for us.
configure()resolves. So by the time the app is rendered, Authgear is ready to use.
UserProvider.vue, it will have a
isLoggedInboolean value. The
isLoggedInboolean state can be auto updated using the
onSessionStateChangecallback. This callback can be stored in
delegatewhich is in the local SDK container.
AuthRedirect.vuecomponent file in the
finishAuthentication()function in the Auth Redirect component to send a token back to Authgear server in exchange for access token and refresh token. Don't worry about the technical jargons,
finishAuthentication()will do all the hard work for you and and save the authentication data.
isLoggedInstate from the UserContextProvider will automatic set to
true. Finally, navigate back to root (
/) which is our Home page.
AuthRedirect.vuewill look like this
<router-view />tag to the
App.vue. We can then Import UserProvider and wrap the
App.vueshould look like this:
startLogincallback on click. This will redirect the user to the login page.
npm run devand you will be redirected to the Authgear Login page when you click the Login button.
Home.vue, we will add a simple Loading splash and a greeting message printing the Sub ID. We will add two conditional elements such that they are only shown when user is logged in. We can also change the login button to show only if the user is not logged in.
UserProviderto control the components on the page. Fetch the user info by
fetchInfo()and access its
Home.vue, we will add a conditional elements in the template:
openfunction to open the setting page at
Home.vueappend a conditional link to the logout button section.
fetchfunction which automatically handle this, or you can get the token with
fetchfunction for you to call your application server. This
fetchfunction will include the Authorization header in your application request, and handle refresh access token automatically. The
refreshAccessTokenIfNeededevery time before using the access token, the function will check and make the network call only if the access token has expired. Include the access token into the Authorization header of the application request.