Creating a PDF Signing Application using React, Firebase, and Apryse SDK

So for this video , I was asked to record how to get started with the PDF trans sign up .

So you probably have seen the demo of it already on our youtube channel .

But today I'm going to show you how to actually clone the repo , set up the firebase , set up all the course issues and have it work in your environment .

Now , that being said that PDF tr sign up can actually be used uh in any database in any setup .

You don't have to use Firebase , but I just picked one because in my opinion , Firebase was the most easiest to get started .

So let's go ahead and jump in .

So the first thing I want to do is navigate to PD Fron github , which I have pulled up right here .

And then we'll just go ahead and go to PD Fron sign up .

And again , I will just make this a little bit easier for you to see .

So we're going to PDF to sign up .

And then , so I'm gonna go ahead and just download the zip , you can clone it and then we're gonna extract it and find it here .

Go ahead and extract it .

The next thing I wanna do is open it up in the studio code .

So let's go ahead and open the folder and we'll just open the downloads where we cloned it , open it .

OK ?

Perfect .

So at this point , the first thing that I want to do is maybe just run N PM in my terminal .

OK ?

The next thing I want to do is go ahead and create the new file and the Redi directory of my project and I'll just call it ENV and this is where I'm going to place all my environment variables .

Now back on kind of the github .

There's a bit of a read me that you can follow kind of for the steps .

So we did the first step where we went ahead and installed it and now we're going to set up the firebase configuration and I already kind of pre declared all the variables like KP I key , messaging sender ID app , id off the main database , URL and project ID , as well as the storage pocket for you to easily kind of copy , paste your keys once you actually have it set up .

So let's just go ahead and copy this in our newly created ENV file available in our VS code , um paste it in .

So at this moment , I just have the placeholder string .

So we're going to go ahead and replace them .

So what I'm gonna do is navigate over to the firebase.google.com and then after that , uh once you logged in with your account , you can actually go to console and yeah , let's see what's happening here .

So , as you can see , I already have the project set up here .

But what I'm going to do , I'm just gonna go ahead and kind of start it from scratch just so you get all the steps .

So I'm just going to call it PDF drawn , sign up two .

OK ?

And we don't need Google Analy for this project .

So we're going to go ahead and create the project provision , all the resources for it and kind of go from there .

Now , our project is ready .

Let's go ahead and set it up .

So for this project , we will need the database and we'll need the storage where we're going to be placing our signed PDF S or when the user uploads the PDF S .

So we've got to set up the storage and we got to set up the fires store to kind of save our database entries .

And then I also use the authentication through Firebase .

So we just need to kind of set up three pieces , set up authentication because it's the first thing .

So let's say get started .

And then what we want to do is we want to enable email and password to be true .

So we'll allow users to sign up using their email and password and I'm not gonna enable this one , but you can do so on your example , and then I wanna enable signing in with um the Google one .

So I'll hit enable on this one .

It's asking for a project support email .

You can just enter yours , probably the account you've signed in with .

So I believe uh authentication portion taken care of .

Uh looks pretty good .

So , and you , you also see the authorized domain , so it's going to be your local host for testing environment and then you actually have a PDF to sign up firebase if you want to deploy it uh later on .

Ok .

And then there's a couple other settings that you can do one account per email address and so on .

I think that's pretty good setting so we can just leave it as is the next thing I want to do is set up storage .

Um So this is where we're going to be kind of storing our PDF documents when the users upload them for signing .

So actually , it looks good to me .

So we'll just hit next .

And after you said this location can be changed later , uh cloud storage location , Europe , West , us Central .

Let's see if there's anything else for me , us West probably would be closer , but I would just keep it as us central since it's suggesting not sure kind of how it figures out whether or not which location is better or not .

OK .

So we have set up our storage , it's just creating a default bucket .

Um That's where we're going to be placing our files .

Ok .

Nice and double check our rules .

Our rules looks good here .

So it says if we don't pass , if we don't pass an authentication token , uh , then we should not be allowed to write to this bucket , which makes sense .

A user should be logged in and authorized to write to the bucket .

And then the , the last piece that I wanna do is set up the firestorm for our documents .

And we're gonna go ahead and start in test mode and I think we can actually have the better permissions for the firestorm .

So we can set up the rules and we can actually match the rules to be very similar to um our bucket , so I can set it up .

Oh , I can actually edit it right now .

Let's let's go ahead and start in test mode and then we're gonna hit next place it in the same location as our storage location .

So just so they are in the same region and then I'm gonna edit the rules to actually match them to be very similar um to , to our bucket .

So in , I'm just gonna kind of copy , paste it over and delete the previous .

So pretty much if you can see here , what we're doing is we're matching them to be the exact same way in the storage .

So if the request author header is not passed , you know , we're not going to allow anybody to write it So we're just gonna go ahead and publish it .

And yeah , we'll create a new rule that looks good to me .

So we'll have our fire store , we'll have our store set up and we have our authentication .

So we have all the pieces we need for the PDF to sign up to be up and running .

So the next thing I want to do is actually go ahead and up and add the app to get started .

So actually kind of plug it in to , to our uh workflow .

So to do that , uh we , we'll connect our uh web app and we're just gonna give it a PD Fron sign up two and we're gonna register it and then here's all our keys that we need .

So it has the API key off the main project , Haiti storage bucket , messenger sender , ID and app ID again .

Please make sure you use yours .

I'm going to delete this project right after .

So if you paste in those numbers , they're not going to work .

So inside of my NB variables , I can just kind of go ahead and start copying them over .

And the last one that I'm missing , I'm missing my database URL .

So we're going to go ahead and kind of get the database URL uh from our database and kind of see where it's coming from .

So I believe for our database URL for some reason , it did not provision it to us , but it may be because we don't have any single collection or document in it .

So as such , I'm going to use my previous one and I'm just going to add .

So it's whatever your name is , plus.firebase.io.com and it goes through http S So at this point , we set up our ENV with the new project and everything set up on the firebase side .

Uh There's probably one more thing we gotta do , but let's go ahead and kind of see what happens now if we go ahead and try to run this app .

So I simply typed in N PM , start , it starts the development server and actually see what comes up and if we get any error messages inside our console tab .

So it looks like the application came up .

So let's go ahead click inspect , uh click on the console and see if anything here and see if we can kind of try logging in with Google .

So at this point , it comes up looks pretty good .

I can log in with my own personal address .

So we have created the token and we can go ahead and prepare a document for signing and see what happens .

So for now , I was just gonna go ahead and send it over to myself .

Continue and let's go ahead and find a test document .

So for the text document , I have this uh legal contract that maybe I wanna sign .

So OK , perfect .

Let's go ahead and add a signature to it .

So this is where I wanna sign it .

Maybe you wanna resize it a bit more just to make it uh a little bit friendlier here , not as big here .

OK ?

And at this point , it looks good .

So let's actually go ahead and send it out .

So now what should happen ?

It should place the document inside of our database and let's actually go back to our firebase kind of uh set up that we had and see what it starts to look like now .

So as you can see storage , so PDF John , as you can see that the storage actually put the PDF inside of it very good .

And then our fire store actually created the collection as needed .

So I'm not sure why it didn't work , but uh my , my kind of work around fixed um the issue .

So we'll have the documents to sign as you can see it has all the information from who who should be signing it , whether or not it was signed and signed by and signed time as well as the users .

So I logged into this application and kind of placed it .

So I have my photo URL email and display name .

So this is all the application really collecting from the users , which is not too bad .

So now I think we're going to run into the issue with actually trying to kind of open the document uh from here .

So I'm gonna go ahead and sign uh web year is loading up .

And as you can see it's running into course issues , so we haven't configured course on our bucket .

So now we're gonna go ahead and do that again .

You can find a little bit more information on how to do that from the github greet me .

But pretty much this is the guide that I followed and we're going to see how to configure course .

So we need to go ahead and kind of create a JSON file that contains the following and actually have one ready .

So let's go ahead and kind of make 10 , maybe through VS code .

I'll go ahead and create a new file here and I will call it course dot JSON and the side of course , that JSON , I'll go ahead and place this .

This is already kind of preconfigured that origin can be anything and we're gonna be get and it will allow us to pull files uh from our bucket .

Maybe we can uh format a little bit .

So I'm gonna create a new terminal window here and see if I have it installed GSU two and command is not found .

So let's go ahead and install GSU tool first .

Oh , it's a bit confusing .

OK .

Cloud is the case set of tools .

OK .

How do we actually download GSUT ?

Ok .

Installing the documentation led us back here and first you got to make sure that you actually have Python installed .

So I do have Python running uh Python 2.7 .

Uh So it is supported .

So now I can kind of go ahead and I believe , download this one .

So I'm running Mac Os 64 bit .

I'll go ahead and download .

It's not very straightforward .

I wish it was a little bit easier , especially when we're just updating a simple Json file uh for our course bucket , but it seems like and after I unzipped it , so here's kind of all the decay available here .

I can kind of run the install script , ok ?

So to , to run the script , you just gotta type in s install that S and I'm just gonna skip this one over and I wanna continue , I think that's fine .

Ok ?

Perfect .

So now it installed and added it to the path .

You can go ahead and run G Cloud in it and it will actually go ahead and kind of log you in .

So now I'm just gonna , it popped open a URL here .

I'm just gonna log in with the same account uh that you have used uh to set up , ok ?

So now we're authenticated Google Cloud is the case .

So now we can start updating our bucket .

Oh , that was a lot of steps .

Um So now the next thing we want to kind of get back and configure the cross origin .

So now that we have the GS util set up , uh we just need to kind of set the JSON file name from where it is .

And then after that provide our bucket name .

So let's go ahead and get back to our vs code terminal kind of min that so we can , we can kind of see the command and again , just make sure that you actually restart that um server just so you have access to it .

And after that , you can type in GST course set .

Um And then JSON file name is just gonna be within this folder .

It's going to be of course dot JSON , ok ?

Of course , that JSON and then provide the address uh of your bucket and we've created it inside of the NB here .

And our bucket is storage is this one right here , but we just got to prep it with a GS and then provide a bucket name here .

This is our bucket name .

Great .

Ok .

So I think this command should work .

Yes , it worked the first time .

So now , um let's get back to the first terminal .

Our app is still running at local host 3000 if we go back and try to pull this document over from our bucket .

Now , boom .

As you can see it came over , it looks good and check it out .

The sign here field is here and our project is set up so I can go ahead and create the signature , I can sign the document and I can complete signing and after that , it's going to be complete .

So at this point I showed you everything you need to know to set up PDF trans .

Sign up again .

You can try to switch around technologies and try to launch it with maybe A W US or Azure or any of the other service providers kind of for storing information .

I'm curious to see what do you think and kind of what your setup that you chose for the back end for this specific app .

Uh Let me know in the comments below .

Thanks so much for watching .