{"__v":39,"_id":"56d5a90ef612b80b00fb69ce","category":{"__v":1,"_id":"56d5a8ecf612b80b00fb69cd","pages":["56d5a90ef612b80b00fb69ce"],"project":"54774d9af3736008009e9e0e","version":"56a0bd9e3697d80d002ac5e7","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-03-01T14:36:28.699Z","from_sync":false,"order":9,"slug":"tutorials","title":"Tutorials"},"parentDoc":null,"project":"54774d9af3736008009e9e0e","user":"54774c47f3736008009e9e0c","version":{"__v":20,"_id":"56a0bd9e3697d80d002ac5e7","project":"54774d9af3736008009e9e0e","createdAt":"2016-01-21T11:14:38.131Z","releaseDate":"2016-01-21T11:14:38.131Z","categories":["56a0bd9f3697d80d002ac5e8","56a0bd9f3697d80d002ac5e9","56a0bd9f3697d80d002ac5ea","56a0bd9f3697d80d002ac5eb","56b098a43a5b810d00745e3f","56b098da8f7a4f0d0029dd10","56d5a8ecf612b80b00fb69cd","570989853ab43c0e0072b2d6","571006aa10300c0e007f6133","5735a52431a73b1700887ca0","5744b0529e045c0e00b7a7a2","5744b1d0b56d431700d8a4fb","5744b1fb55d65a0e00b436e1","5744b218f9c7411700ce560e","5744b220f9c7411700ce560f","5744b2259e045c0e00b7a7a7","5744b22cf8b79f0e00de6a2d","5744b23155d65a0e00b436e4","5744b242c758290e00fbc235","5744b2569e045c0e00b7a7a8","5756a3f2bb92962900dafe3d","57ee23e81e42900e0014a42f","581c822c98676e0f00d240ef"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"Sockets","version_clean":"1.1.0","version":"1.1"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-03-01T14:37:02.133Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"## Chapter Content\n1. [Introduction](#introduction)\n2. [Setup](#setup)\n3. [Updating settings](#updating-settings)\n4. [Run the app!](#run-the-app) \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Introduction\"\n}\n[/block]\nThis tutorial will show you how to implement Syncano as a proxy for Twitter Social Auth using hello.js library.\n\nWorking demo is available at: http://syncano-social-auth.herokuapp.com/\nGithub repository: https://github.com/Syncano/social-auth-examples\n\nPrerequisites:\n- An account on Syncano Platform. You can sign up [here](https://dashboard.syncano.io/)\n- [Node.js](https://nodejs.org/en/)\n- git\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Setup\"\n}\n[/block]\n1. Clone the social-auth-examples repo from the Github repository. You can do this by going to your terminal and pasting this line:\n\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"git clone git:::at:::github.com:Syncano/social-auth-examples.git\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n2. `cd` into the cloned repository:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"cd social-auth-examples/\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n3. Install the dependencies with npm:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nDependencies needed for the project to work will be installed. Now we'll have to change the apps settings to work with your Syncano Instance.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Updating Settings\"\n}\n[/block]\nThere are two files that need to be updated for the application to work:\n- hello.js\n- index.ejs\n\n### hello.js\n\nThis demo is using [hello.js](https://adodson.com/hello.js/#hellojs) for handling the authentication flow on the client side. To make it work with your application based on syncano you need to follow these steps:\n\n#### 1. Copy your Instance name from the Syncano Dashboard\n\nYou'll find your Instance name on the Instances list in the Syncano Dashboard:\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/9KBSfQtaRCWMiPIxvd54_instances_list.png\",\n        \"instances_list.png\",\n        \"1919\",\n        \"985\",\n        \"#264474\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nSelect the name of an Instance you want to use and copy it to your clipboard.\n\n#### 2. Add your instance name to hello.js file\nYou can find the hello.js library in the `lib/` directory of the project. Open it in your favorite editor. Line 82 of this file should look more or less like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\t\\toauth_proxy   : 'https://api.syncano.io/v1/instances/INSTANCE_NAME/user/auth/backend/twitter/proxy',\\n\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\nChange `INSTANCE_NAME` to the name of your Syncano Instance that you just copied.\n\n### index.ejs\n\nindex.ejs file is in the `views/pages/` folder of the project. In lines `48`-`51` we are initiating a connection to Syncano via the Syncano javascript library:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var instance = new Syncano({\\n  apiKey: 'API_KEY', \\n  instance: 'INSTANCE_NAME'\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou'll need to add a new API KEY. To do this:\n1. Go to Syncano Dashboard -> Chosen Instance -> API KEYS tab\n2. Click `Add` button\n3. Type your `Description`\n4. Check the `user registration` toggle button\n5. Click `Confirm` button\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2cRf2xixRCuZ7KuMjYvb_go_to_add_new_api_key.png\",\n        \"go_to_add_new_api_key.png\",\n        \"1920\",\n        \"987\",\n        \"#244676\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/TaUAVOYyRzm7x5oewv9N_add_new_api_key.png\",\n        \"add_new_api_key.png\",\n        \"1919\",\n        \"985\",\n        \"#21466a\",\n        \"\"\n      ],\n      \"sizing\": \"smart\"\n    }\n  ]\n}\n[/block]\nOnce you have your API Key, paste it into line `49` of index.ejs file.\n\nAlso paste the instance name into line `50` of index.ejs (the same as you did in hello.js file in previous step).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Run the app!\"\n}\n[/block]\nThat's all that needs to be done in order to implement social login by using Syncano as a proxy to Twitter authentication. Now you can run the application by typing this command from the root of the project:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm start\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nIt will start the web server that is available under `http://localhost:5000/`. Paste the url into your browser bar and go through the Twitter signup flow. Now go to the Syncano Dashboard. Click on the Instance that you used for the purposes of this demo. Go to users page. You'll see that a new user was added to your application!\n\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Uj0LuguR8mbD3ptdtPww_twitter_new.png\",\n        \"twitter_new.png\",\n        \"1919\",\n        \"985\",\n        \"#264574\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"Learn how to build Twitter Social Authentication with your users on Syncano in Javascript","slug":"twitter-social-authentication-js","type":"basic","title":"Twitter Social Authentication (JS)"}

Twitter Social Authentication (JS)

Learn how to build Twitter Social Authentication with your users on Syncano in Javascript

## Chapter Content 1. [Introduction](#introduction) 2. [Setup](#setup) 3. [Updating settings](#updating-settings) 4. [Run the app!](#run-the-app) [block:api-header] { "type": "basic", "title": "Introduction" } [/block] This tutorial will show you how to implement Syncano as a proxy for Twitter Social Auth using hello.js library. Working demo is available at: http://syncano-social-auth.herokuapp.com/ Github repository: https://github.com/Syncano/social-auth-examples Prerequisites: - An account on Syncano Platform. You can sign up [here](https://dashboard.syncano.io/) - [Node.js](https://nodejs.org/en/) - git [block:api-header] { "type": "basic", "title": "Setup" } [/block] 1. Clone the social-auth-examples repo from the Github repository. You can do this by going to your terminal and pasting this line: [block:code] { "codes": [ { "code": "git clone [email protected]:Syncano/social-auth-examples.git", "language": "shell" } ] } [/block] 2. `cd` into the cloned repository: [block:code] { "codes": [ { "code": "cd social-auth-examples/", "language": "shell" } ] } [/block] 3. Install the dependencies with npm: [block:code] { "codes": [ { "code": "npm install", "language": "shell" } ] } [/block] Dependencies needed for the project to work will be installed. Now we'll have to change the apps settings to work with your Syncano Instance. [block:api-header] { "type": "basic", "title": "Updating Settings" } [/block] There are two files that need to be updated for the application to work: - hello.js - index.ejs ### hello.js This demo is using [hello.js](https://adodson.com/hello.js/#hellojs) for handling the authentication flow on the client side. To make it work with your application based on syncano you need to follow these steps: #### 1. Copy your Instance name from the Syncano Dashboard You'll find your Instance name on the Instances list in the Syncano Dashboard: [block:image] { "images": [ { "image": [ "https://files.readme.io/9KBSfQtaRCWMiPIxvd54_instances_list.png", "instances_list.png", "1919", "985", "#264474", "" ] } ] } [/block] Select the name of an Instance you want to use and copy it to your clipboard. #### 2. Add your instance name to hello.js file You can find the hello.js library in the `lib/` directory of the project. Open it in your favorite editor. Line 82 of this file should look more or less like this: [block:code] { "codes": [ { "code": "\t\toauth_proxy : 'https://api.syncano.io/v1/instances/INSTANCE_NAME/user/auth/backend/twitter/proxy',\n", "language": "json" } ] } [/block] Change `INSTANCE_NAME` to the name of your Syncano Instance that you just copied. ### index.ejs index.ejs file is in the `views/pages/` folder of the project. In lines `48`-`51` we are initiating a connection to Syncano via the Syncano javascript library: [block:code] { "codes": [ { "code": "var instance = new Syncano({\n apiKey: 'API_KEY', \n instance: 'INSTANCE_NAME'\n});", "language": "javascript" } ] } [/block] You'll need to add a new API KEY. To do this: 1. Go to Syncano Dashboard -> Chosen Instance -> API KEYS tab 2. Click `Add` button 3. Type your `Description` 4. Check the `user registration` toggle button 5. Click `Confirm` button [block:image] { "images": [ { "image": [ "https://files.readme.io/2cRf2xixRCuZ7KuMjYvb_go_to_add_new_api_key.png", "go_to_add_new_api_key.png", "1920", "987", "#244676", "" ] } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/TaUAVOYyRzm7x5oewv9N_add_new_api_key.png", "add_new_api_key.png", "1919", "985", "#21466a", "" ], "sizing": "smart" } ] } [/block] Once you have your API Key, paste it into line `49` of index.ejs file. Also paste the instance name into line `50` of index.ejs (the same as you did in hello.js file in previous step). [block:api-header] { "type": "basic", "title": "Run the app!" } [/block] That's all that needs to be done in order to implement social login by using Syncano as a proxy to Twitter authentication. Now you can run the application by typing this command from the root of the project: [block:code] { "codes": [ { "code": "npm start", "language": "shell" } ] } [/block] It will start the web server that is available under `http://localhost:5000/`. Paste the url into your browser bar and go through the Twitter signup flow. Now go to the Syncano Dashboard. Click on the Instance that you used for the purposes of this demo. Go to users page. You'll see that a new user was added to your application! [block:image] { "images": [ { "image": [ "https://files.readme.io/Uj0LuguR8mbD3ptdtPww_twitter_new.png", "twitter_new.png", "1919", "985", "#264574", "" ] } ] } [/block]