diff --git a/src/pages/docs.html b/src/pages/docs.html index cba5d64..8dd6438 100644 --- a/src/pages/docs.html +++ b/src/pages/docs.html @@ -15,11 +15,11 @@

Getting Started

-

Create a free Userbase account

-

First you need a Userbase developer account. You will be able to create a free account when Userbase gets launched. No credit card required.

+

Create a developer account

+

First, you need a Userbase developer account. You will be able to create a free account when Userbase gets launched. No credit card required.

Install the SDK

-

Then you need to include the Userbase SDK into your web app.

+

Then, you need to include the Userbase SDK into your web app.

You can either include the SDK with a <script> tag:

@@ -28,7 +28,7 @@
     -->
   
-

Or else you can include the SDK into your build pipeline:

+

Or else, you can include the SDK into your build pipeline:

     
@@ -37,7 +37,7 @@
   

Set the Application ID

-

From your Userbase account, create a new App and get the Application ID. Then you just need to configure the Userbase SDK to use it:

+

From your developer account, create a new App and get the Application ID. Then, you just need to configure the Userbase SDK to use it:

     
@@ -586,7 +580,7 @@
   
   
 
-  

Then, add code to handle the form submission:

+

Then, let's add the code to handle the form submission:

     
@@ -623,12 +617,12 @@
   

- Reload the app and add some to-dos. Then reload the app again and the to-dos should automatically appear after you login. + Reload the page and add some to-dos. Then, reload the page again and the to-dos should automatically appear after you login. These to-dos have been successfully persisted in the end-to-end encrypted Userbase database.

Updating to-dos

-

Let's modify how we are rendering the to-do items so we can mark them as completed:

+

Now, let's add a checkbox to allow to-dos to be marked as completed:

     
@@ -665,12 +659,12 @@
   

- Reload the app and complete some to-dos. Their state should presist after you reload the app and login again. + Reload the page and complete some to-dos. Their state should persist even after you reload the page and login again.

Deleting to-dos

-

Let's create a button for deleting a to-do:

+

And finally, let's create a button for deleting a to-do:

     
@@ -692,7 +686,7 @@
     
   
-

And append the delete button to the to-do element:

+

And now let's append the delete button to the to-do element:

     
@@ -706,7 +700,7 @@
   

- Reload the app and delete some to-dos. They should no longer show up even after you reload the app and login again. + Reload the page and delete some to-dos. They should no longer show up even after you reload the page and login again.

Polishing up

@@ -728,7 +722,7 @@
-

Then, add code to handle click event and log out the user:

+

Then, let's add the code to handle the logout:

     
@@ -778,15 +772,13 @@
     
   
-

The handleLogout function calls userbase.signOut which sends a request to end the user's session to the Userbase service. A Promise is returned that resolves when the user was signed out, in which case we hide the to-do view and show the authentication view.

+

The handleLogout function calls userbase.signOut which sends a request to end the user's session to the Userbase service. A Promise is returned that resolves when the user is signed out, in which case we hide the to-do view and show the authentication view.

Automatically resuming a session

-

Whenever a user logs in, the Userbase SDK will store information about the session in browser to allow the session to be resumed when the user returns after having navigating away.

+

Whenever a user logs in, the Userbase SDK will store information about the session in the browser to allow it to be resumed when the user returns after having navigating away.

-

Let's modify our app to automatically sign in a user when the page loads. We'll add a view that indicates we are signing in the user:

- -

Add a view to show when the app is figuring out whether it can resume a previous session:

+

Let's modify our app to automatically sign in a returning user when the page loads. First, we'll add a view that indicates we are signing in the user:

     
@@ -802,7 +794,7 @@
     
   
-

In order to automatically resume a session if one is available, we add the following to our application code:

+

In order to automatically resume a session if one is available, we need to add the following to our application code:

     
@@ -833,7 +825,7 @@
   

- We make a call to userbase.signInWithSession to attempt to sign in the user + Then, we make a call to userbase.signInWithSession to attempt to sign in the user using an existing session as soon as our app loads.

@@ -848,14 +840,16 @@

What's next?

+

And that was it! A fully working (but ugly) web app in just 185 lines of code, including markup and comments.

+

- In a real project you'll likely want a more sophisticated approach: for instance, you may use React to control the DOM or a module bundler to package your application from multiple files, and at the very - least you'll want to display better error messages and add some styling. + In a real project you'll likely want to use a more sophisticated approach. For instance, you may want to use React to control the DOM, or a module bundler to package your application from multiple files. At the very + least, you'll want to add some styling.

- We are working on a collection of tutorials and sample applications that will - show you how to do all these things with Userbase and more. You can subscribe to our mailing list to get updates on these and more. + We are working on a collection of new tutorials and sample applications that will + show you how to do all these things with Userbase, and more. You can subscribe to our mailing list to get updates like these in your inbox.

If you have any questions, or there's anything we can do to help you with your web app, please get in touch via email or Twitter. Thank you!