So what I want you to do now is go ahead and create a played account. So I'm gonna go ahead and log in and then we're gonna take a look at the dashboard. After you get inside of your dashboard here, I'm not sure what screen you are going to see because I already have a couple of projects here. So I'm going to go ahead and create a new team because perhaps this is the screen you are seeing. So I'm going to go ahead and call this finance tutorial like this and if you want to you can go ahead and further answer these questions right here and let's go and create this new team so we get a fresh set of API keys which is exactly what we need next.
So make sure that you verify your email right here to get full dashboard access because you are going to need that and you will not need the production access to finish the tutorial. So what we are going to do is we're going to go ahead and go inside of developers and we're going to go inside of keys right here. Now for you, you might get a message here that you need to enable two-factor authentication and you do. I had the same thing. So you should go inside of settings or you can probably use the...
I mean if you can see your API keys great you don't have to do anything but for me I got a notification that I need to add it. There we go. I need to go inside of security here and I needed to add an authentication app two-factor method. Great. So let's go inside of developers here and let's go inside of keys.
So what we're going to do now is we're going to go ahead and prepare that in our environment file. So I'm going to go inside of .environment.local here and I'm going to add played client token and played secret token like this. So let's go ahead and obtain the client token. So that's this right here. Let's copy that.
And let's paste it here. And our secret token is going to be Sandbox. So we're going to work with Sandbox here. So make sure you choose this one. So I'm going to go ahead and copy this and let's save that here as well.
Great! What I want us to do next is to install a package called plate. So let's do bun add or npm install plate. So what we are going to do next, just ensure you have a run dev here. What we're going to do next is what it says in the documentation right here.
So we're going to go ahead and develop this flow starting with the link token create to create a link token. Then we're going to go to the step 2, step 3 and step 4. So we're going to do this flow. This is from their documentation right here. If you're interested in learning more about this I actually have a workshop Synchronize Your Bank with Next.js where we use Plaid to do exactly this.
So if you want another module specific for this one you can go ahead and watch that and if since you're watching this additional content you have unlocked access to all workshops as well Great. So let's go ahead and Let's create an endpoint to do this to create a temporary token which we need to even start the Plaid bank connection process. So go inside of the app API and inside of here we're going to create Plaid.ts. So this is going to have Hono. From Hono.
So let's go ahead and write const app new Hono right here. And let's export default app. And inside of here we're going to chain a post method which we are going to call create link token. Like that. And let's go ahead and assign a couple of things here.
So first of all we're going to have to add the clerk middleware from HonoClerkOut and then we're going to have our asynchronous controller here for now let's just return c.json played true like that and now that we have this let's go inside of our route.ts let's import blade from blade right here so let me move this I like to order by length. You don't have to do that, of course. Let me add the route slash Plaid to use Plaid routes like that and now we should have blade available so when I hover over my routes well somewhere here I should have blade right? I'm not sure where I can see that now but I'm pretty sure it is available here great So what I want to do now is I want to create a hook for this. So let's go and let's go inside of features.
I'm going to create a new folder called plate. I'm going to create an API and I'm going to create use create link token dot TS so this will be a mutation so for example we can copy I don't know from categories use create category let's copy everything inside so we save some time and let's paste everything inside of here. First of all let's resolve our response types and request types so instead of categories here it's going to be played and then we're going to go ahead and open so let's let me remove the post in both of this so we're gonna open played and then we're gonna add create link token and then again in curly sorry square brackets post request So you have to do the same thing here. So after played, add this, there we go. And we are actually not gonna have a request type so you can remove it and you can remove this as a prop as well.
And now inside of here we're going to use played and again create link token and in here you can use the dot notation right When working with types you have to use this for post but in here you can use both this if you like it or you can do dot post like that and we actually don't have any JSON so no need for this at all like that and inside of here we are not going to invalidate anything because nothing like that is happening here. So you can remove the import for this. The only thing, and you can remove the query client and use query client so you can remove this. The only thing we are going to do is we are going to send a toast message here link token created right here and inside of here we're going to say failed to create link token like this. There we go.
So now what I want to do is I want to go inside of my settings page. So back there, let's go inside of dashboard settings, settings card, and we're gonna go ahead and copy this button, which we've prepared as our connect button, and we're going to create a component, PlayConnect.tsx. Let's go ahead and mark this as use client and let's export const plate connect here. It's not going to accept any props. So this is a typo.
And very simply return that button here. So make sure you import it from components button. And actually let's move it away from the settings page. Cut it or copy it from here and let's create it inside of features Played and let's create a folder components. I think this is a better place.
There we go right here Great. So we're gonna leave it like this. Let's go back instead of our settings settings card Remove this and instead use played connect like this So you can remove this import here and I like to keep my features at the top. Like that. There we go.
So we now have Play Connect here. And what we're going to do is we are going to immediately on the mount of this component we are going to fetch our new, where is it, .slash create link token right here So we want to do that on the mount. So we can use this little handy use mount from react-use because we already have this package installed so why not. Let's go ahead and let's add use state here from react like this. And then I'm gonna go ahead and prepare this so const token set token will be use state and by default it's going to be null but it will be able to accept the string right or be null and now let's create const create a link token to be used create a link token let me see if I forgot something so api use create link token I forgot to rename this use create link token there we go let's go back and let's try and import this now there we go so you can either use this notation or features blade I like this one better all right so we now have this and now let's go ahead and let's call useMount.
No need to add a dependency array, right? So this is from React use which is the set of those useful hooks for us. So only on mount I want to call create link token dot mutate and I'm gonna pass in undefined as the first argument and then on success I'm gonna go ahead and get the data and I'm going to console.log the data here. Like this. So right now data does not exist.
That is true because if you visit the plate here we have played. So how about we do data and we're just gonna say token 1, 2, 3. There we go. So now we have data because we return the proper type. Perfect.
How about we try it out. So I'm gonna go ahead here and I will keep this open and let me refresh this. So let's see if this is what we need. So the connect button by itself should now fetch and there we go. We have the message here link token created and I have data token 1, 2, 3.
And in my network tab, if I just go here, we have create link token. It's fired twice because in development React uses strict mode which fires use effects twice. Great, so that is step one. We have a link token. Well, it's not actually step one, my apologies.
We didn't actually do it, right? I forgot. Let's actually do that. So instead of played here, we now have to import our newly installed package Plaid. So let's go ahead and import Plaid.
Actually let's do it like this. Let's set up the configuration using new configuration. So the configuration will come from plate like that and now we're going to set the base path to be played environments from plate dot send box be careful when typing this out because there is no type safety here so dot send box like this then we're gonna have base options headers and we're gonna write played dash client dash ID headers and we're gonna write blade-client-id and that's gonna be process.environment and make sure that you use this exact one. So copy it from here and paste it here like that. And the other one is going to be played secret but without the id here.
And then again just copy whatever you wrote here and assign it here. There we go. So if this base options and headers looks familiar, that's because Plaid uses Axios inside of it. So this is actually Axios configuration right here. That's how their API works.
And now let's do const client new Plaid API. Again, import from Plaid. And pass in the configuration right here and now inside of here we're gonna do the following so first of all let's check if we are authenticated so get out c if there is no out question mark user id and we have to import get out from hono clerk out right here We are going to return c.json and we're gonna pass in the error unauthorized with a 401 like that. And now let's create our temporary token by using await client link token create and pass in the user to be client user ID out dot user ID. So it's going to be a unique token for this user.
And now let's go ahead and give our client name. So in here you write what you want. For example, finance tutorial. That's going to appear on the component when we add it. Now let's add the products and that's going to be products you can import that from Playd so make sure you add the this import so let's go ahead and collapse all of this so Playd environments products like this is going to be products dot transactions and country codes It's gonna be products.transactions.
And country codes are gonna be again country code and import from Plaid. And in here you would add all the countries you want to support for this. So they have a limited country support, right? But they do have the US one and this is mostly targeted for US customers. I've seen Plaid being used in a lot of apps which target US customers and allow them this feature to connect their bank accounts here.
And you can freely add US even if you're not from the US. So I'm from Croatia and there actually isn't an option for Croatia here, right? So I can't use it but I can still develop this for my American customers if I had an application like this. And lastly we define the language and let's make that English and then let's do return c.json data token.data and now if I am not mistaken we are going to get an error here. So let me go inside of the terminal so we can keep track of what's going on and let me try and refresh this page.
And let's see, there we go. So it says failed to create a link token and you can see that in here it says Axios error there is no suitable adapter to dispatch blah blah blah right so the issue with this is because I don't know if you remember but when we set up route.ts here I set the runtime to be edge Unfortunately Axios does not work with the edge. So what you can do here is write node.js I believe. Let me see the terminal and see what the terminal is going to say. So now if I refresh I think that this will work just fine.
There we go. Link token created. And I think Node.js is the correct choice because if you write just Node, I think then we start getting errors in the terminal. There we go. Provided runtime node is not supported.
So you can either leave it empty or choose one of Edge, Experimental Edge or Node.js. So you can either leave it empty or choose one of Edge, Experimental Edge or Node.js. So you can either leave it empty. I think this will also work so let me refresh this. Link token created.
Yes, if you want you can remove it or you can explicitly write node.js. So yeah, you can't use the edge if you want to use Plaid here because Plaid uses Axios. I'm not sure if maybe there is a way to only turn off edge, for example, one route. If there is, I'll create an additional chapter and simply show you how to do that. But to finish this tutorial just change the runtime to Node.js.
Great! So now we have our token. So if I go ahead and go in here and refresh data and there we go. So you can see I have expiration link token request ID and this is what we are interested in, the link token. And you can see it has a sandbox prefix here.
So we successfully created this flow right here. We'll call link token create to create a link token. And now we have to pass that token to a link component, which is something you're gonna see next. But before we wrap that up, let's go ahead and do this. Let me just check inside of Plaid here.
So if you want to, you can pass the entire data or you can just specifically pass link token here. And I think this is better because that's the only thing we are interested in. We don't care really about all the other options it has. So just add token.data.linktoken inside of your Plaid create link token route right here. Now we can go back inside of your Plaid connect and now let's go ahead and see what happens now.
So why did I lose the data here? We still returned the data so we should not be losing it. Let's see what kind of error is that. Okay. So I think the error is because inside of our plate right here, we either return an error or this.
So I added this 200 because I was testing it out. So let's see. Yeah, manually add 200 here inside of this successful response. So we still have this issue here. So let's go inside of use create link token and let's modify the response type to only handle the types.
If we are on 200, right here. And inside of here, let's see if this will resolve this. So if response is not okay, how about if we throw an error? There we go. So we're gonna say, failed to create link token, Like that.
And I think now it's type safe. So inside of this data here, there we go. So data is a string because link token is a string. Perfect. So instead of logging it, what we can do now is we can add setToken to be the token itself.
Great. And what that's going to do, well, you can do the following now. So For example, give this button a disabled prop if we don't have a token. So now every time the user visits the settings page here, they're gonna have to wait until the token is created right here. And let me just see if this is working.
Oh, my apologies. Data.data. Just data. We don't need anything else. Let's check it out now.
So refresh, and there we go. So you can see how it was disabled for a second and then it became enabled because it's ready to be passed to the frontend blade component. So that's what we're going to do next.