Auth flow link
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.

[00:00 - 00:15] AuthFlow link. In this lesson we'll define an authorization flow link. Create a new file as you see. Auth, Auth, Flow, Link.ts. First define the GitHub base URL. This is where we 're going to make all our requests.
[00:16 - 00:35] const, github, base, URL. It's htps, api, github.com/graphql. Now we can define the base hdp link. It will be responsible for actually making the requests. const, htp link equals new htp link.
[00:36 - 00:47] It comes from Apollo client and we pass in the options object with URI, GitHub, base, URL. We're going to preserve the token in memory. So let's define variables to do this.
[00:48 - 01:35] Let token, string, or null, let token invalid equals false. This is going to be our in memory storage for the authorization token that we'll get from github. Sometimes we may receive a response that will mean that the token we're using right now is invalid. In this case we will mark the token invalid flag as true and it will mean that we need to repeat the authorization process. Now define the token middleware. It will return the cached token otherwise if the cached token does not exist. So the token, where above that we define here is null. It will return the token stored in the system keychain or get and return a new one. So we define a with token middleware.
[01:36 - 02:09] It's going to be set context. We pass in an async callback where we want to get the headers. Here we check if we have token, then we return it. That means that we've already authenticated during this session and we have the token in memory. If the token is invalid, it also means that we don't have the token. Then we get the new one using the get code function, which means that we repeat the authentication flow. Token equals await get code. And also we set token invalid to false.
[02:10 - 02:40] We do it because we've just got a new token and it's probably valid. Otherwise, if the token is not invalid, but we just don't have it, then we get the token either from key tar, await keytar, get password for the item github and process and client id or we await forget code here as well. Because that means that we didn't even have the password stored in the keychain in the first place.
[02:41 - 03:06] Anyway, we got the token. Either if that token wasn't valid and we were getting a new one using the get code, or if we had one stored in the password keychain, or if we didn't have anything and we just authenticated for the first time. Anyway, we have now the with token middleware that will be getting the new token for us. Now let's define a with auth bearer middleware. It will add an authorization header with a bearer token to all the requests.
[03:07 - 04:33] Const with auth bearer equals set context. Here we pass in a sync function where we return an object with headers where we use all the headers that have already been on the request and add authorization bearer token. The last middleware that we'll need to define is the one that will reset the token when we receive a server error. It will actually set the token invalid to true. Const reset token on error. Here we process the network errors. We check if the network error, we cast it to server error here. status code is 401 and we had a token. So if we had a token and we got unauthorized response code, then it means that we need to reset the token and mark it as invalid. Token invalid is true. Define the retry link that will retry the whole flow if the previous attempt fails. Const retry equals new retry link with the following configuration. We set the delay initial is 300 milliseconds, maximum is infinity and jitter true. The retry link will automatically increase the delay every time the request will be failing. So that we don't ded uce our server accidentally. Now export the whole auth flow link. Export const auth flow link.
[04:34 - 04:43] We created from an array of retry reset token with token with auth bearer and HTTP link.