http://localhost:4000/auth-redirectto Authorize Redirect URIs.
http://localhost:4000/to Post Logout Redirect URIs.
parcelas the build tool and the
react-dompackages. Also, we will use TypeScript in this tutorial.
package.jsonfile, add these two lines to the
startscript run the app in development mode on port 4000. The
buildscript build the app for production to the
src/, create a new file called
index.htmlfor parcel to bundle the app:
App.tsxwith simply showing
Hello Worldin the screen:
index.tsxas the entry point of the application.
npm startnow to run the project and you will see "Hello World" on
authgearand call the
configurefunction to initialize an Authgear instance on application loads.
configure()resolves. So by the time the app is rendered, Authgear is ready to use.
UserProvider.tsx, it will have a
isLoggedInboolean and a
setIsLoggedInfunction. The is
LoggedInboolean state can be auto updated using the
onSessionStateChangecallback. This callback can be stored in
delegatewhich is in the local SDK container.
AuthRedirect.tsxcomponent 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.tsxwill look like this
Home.tsxcomponent file the
App.tsxshould look like this:
Home.tsx. Then add the login button which will call
startLogincallback on click. This will redirect the user to the login page.
npm startand you will be redirected to the Authgear Login page when you click the Login button.
Home.tsx, 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.
UserContextto control the components on the page. Fetch the user info by
fetchInfo()and access its
Home.tsx, we will add a conditional elements in the elements:
openURLfunction to open the setting page at
Home.tsxAdd a conditional link to the elements.
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.