http://localhost:4000/auth-redirectto Authorize Redirect URIs.
http://localhost:4000/to Post Logout Redirect URIs.
my-appwith a routing module generated.
package.jsonfile, edit the
startscript in the
startscript run the app in development mode on port 4000 instead of the default one.
src/app/app.component.htmlfile, remove all the lines and add the following line:
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.
user.service.ts, it will have a
isLoggedInboolean variable. The
isLoggedInboolean variable can be auto updated using the
onSessionStateChangecallback. This callback can be stored in
delegatewhich is in the local SDK container.
auth-redirectcomponent using the following command:
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 UserService will automatic set to
true. Finally, navigate back to root (
/) which is our Home page.
auth-redirect.component.tswill look like this
homecomponent using the following command:
src/app/app.component.htmlby replace the lines with the following:
home.component.ts. Then add the
startLoginmethod which will call
startAuthentication(ConfigureOptions). 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.
homecomponent, 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.
UserServiceto control the components on the page. Fetch the user info by
fetchInfo()and access its
home.component.html, we will add a conditional element in the markup:
openfunction to open the setting page at
home.component.htmlappend 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.