OnlineWithAuthentication Tutorial: JavaScript

this section will require knowledge of writing server side http endpoints and handlers the server side sample code is written in javascript (nodejs with an https //expressjs com/ like api); however, you can use any framework or language of your choosing we will use auth0 in this tutorial but you can use any third party identity provider each app can use multiple identity providers in this tutorial, you'll build a simple application so users can log in with a a third party provider using https //auth0 com/ we assume that you have already completed the auth0 tutorial on their documentation before starting this tutorial for the full application code in javascript and swift, see the https //github com/getditto/examples permission configure ditto if you haven't yet, create an app on the https //portal ditto live/ for this tutorial, we are using an "online with authentication" identity go to your app in the https //portal ditto live/ and find the authentication mode & webhook settings section ensure that "with authentication" is selected like so below, a section called authentication webhooks will be editable once your authentication webhook endpoint(s) is deployed and ready, you can register it in the portal add a name and url provide a unique name to identify your authentication webhooks the url parameter is the fully qualified url of the webhook that you deploy yourself please include https // at the beginning of your url you can use our example webhook to just get started this webhook is a server deployed on a third party server and is just for testing this server will always authorize all clients with full read and write permissions you can use this url to test your application however, you should not use this url in production this replit simply authenticates everyone for 7 days of offline usage https //alloweveryonewebhook tester28 replit app/auth once configured, you should see a webhook that looks like this in your portal app settings configure auth0 if you don't have an auth0 account yet you can https //auth0 com/signup it's free if you already have an auth0 account login at https //auth0 com and follow these steps /#create a new auth0 application configure the allowed callbacks and origins for your application make sure to add the callback url for your application https //auth0 com/docs/get started/applications/update grant types for your application for this tutorial, we will use the "authorization code" grant type create a new api in auth0 this will represent the api that your application will access create a new auth0 application in the menu on the left side of the auth0 dashboard, click on applications this will expand the applications menu select the first item in that menu, which also has the name applications you will now be on the applications page it lists all the applications that you have registered so that auth0 can handle their login/logout processes click the create application button near the top right of the page this creates a new registration for your app you can follow the prompts and instructions on the auth0 site for more details from the auth0 portal you will need to retrieve the following information for your android app domain client id you can store these as string resources in your app on the auth0 portal, you will need to build your callback url and logout url again, see the auth0 website for details on how to do this references https //auth0 com/blog/get started with android authentication using kotlin part 1/ https //manage auth0 com/dashboard/us/dev voiik8orqv6m487g/onboarding integrating auth0 with ditto now that you have configured auth0 and ditto, you can start integrating them into your application assuming you have a login button in the html jsx \<button onclick={login}>login\</button> we attach a login function to the button import createauth0client from '@auth0/auth0 spa js'; // or for react import { useauth0 } from '@auth0/auth0 react'; // configure your auth0 client async function login () { await auth0 loginwithredirect({ redirect uri window\ location origin }); startditto() } we can then create a startditto function that gets the access token and starts a new ditto instance, and passes the token to your server route you created in the previous section the provider name given to the ditto client must match a provider name in the portal (e g , replit auth ) import createauth0client from '@auth0/auth0 spa js'; // or for react import { useauth0 } from '@auth0/auth0 react'; import { init, ditto } from "@dittolive/ditto" // configure your auth0 client let ditto (async () => { await init() // you need to call this at least once before using any of the ditto api function startditto () { let token = await auth0 getaccesstokensilently(); const authhandler = { authenticationrequired async function(authenticator) { await authenticator login(token, "replit auth"); console log("login request completed "); }, authenticationexpiringsoon function(authenticator, secondsremaining) { console log(`auth token expiring in ${secondsremaining} seconds`) await authenticator login(token, "replit auth"); console log("login request completed "); } } const identity = { type 'onlinewithauthentication', appid 'replace me with your app id', authhandler } ditto = new ditto(identity, '/persistence/file/path') ditto startsync() } async function login () { await auth0 loginwithredirect({ redirect uri window\ location origin }); startditto() } })() to demonstrate that this ditto client has been authenticated, let's display the number of cars in the collection, and a button to add one item to it jsx \<div> \<h1>cars {numberofcars}\</h1> \<button onclick={additem}>+1\</button> \</div> once we start the ditto instance, we can create a live query and create a button that adds items to a collection let subscription = ditto store collection('cars') find("state == 'for sale'") subscribe() let livequery = ditto store collection('cars') find("name == 'toyota'") observelocal((cars) => { numberofcars = cars length }) function additem () { ditto store collection('cars') upsert({ "name" 'toyota', "state" 'for sale' }) } log out let loggedin = false if (auth0 isauthenticated()) { loggedin = true } if (loggedin) { // render the logout button \<button onclick={onlogoutclick}>logout\</button> } else { \<button onclick={login}>login\</button> } and then we can write the logout function and attach it to the button we also recommend calling ditto auth logout with a callback function that evicts any data from the local ditto store function onlogoutclick() { ditto auth logout(() => { ditto store collection('cars') findall() evict() }) await auth0 logout({ returnto window\ location origin }) }