Setting up authentication app on a hosted server

Support
#1

Any advice on how to set up the blockstack authentication app on a hosted webserver. I am a mobile developer who went through the hello, blockstack tutorial for ios but now instead of using https://heuristic-brown-7a88f8.netlify.com or localhost:8080 I want to host this on my own server. I have a godaddy account with web hosting and a few registered domains. Do I just take the hello-blockstack folder on my laptop, modify a few files and copy it up to my hosted server.

Or do I need to start from scratch and follow the steps in the tutorial to install things like npm, yeoman, and the blockstack app generator except on the godaddy server. If so any ideas on how to do that.

Or do you have a better suggestion for hosting the blockstack app that handles authentication for my mobile app

#2

Authentication works the same. Localhost or hosted. Meaning your keys and encryption are based on the app URL and your private key, and has nothing to do with where you host.

So yeah, since you’re already using netlify, just put a custom domain in your netlify setup, set your CORS headers in the _headers file, and you should be all set, assuming everything else is working.

#3

If you need files for CORS check out the Animal Kingdom repo. I’ve got support for Netlify and firebase

_headers and _redirects required for Netlify

1 Like
#4

Hi Dan,

Thanks for the reply. I am not using or familiar with netlify. That is the url / webpage that moxiegirl set up to use in the ios tutorial. So I have my own mobile app pointing there for now until I figure out how to set up my own.

Should I look into using netlify. Or since I already have a web hosting account on godaddy am I better off setting it up there.

#5

You can get an account on Netlify for free. There is a section on setting up Netlify in the newly posted Animal Kingdom. If you want to try that.

If Go Daddy is going to charge you for an additional site, it might be better to go no cost until you establish yourself. Your call of course.

#6

Thanks MoxieGirl,

I have multiple domains on godaddy that I could use so it would not cost me anything additional. I just have no idea what the steps are to setup the blockstack authentication app on godaddy. So I’ll try netlify if you have the steps I need to take documented in the animal kingdom dapp link yuo just shared.

But out of curiosity how would I set it up on godaddy. Could I just take the hello-blockstack folder on my laptop that was created by doing your tutorial, modify a few files and copy it up to folder on the hosted godaddy server.
Or would I need to start from scratch and follow the steps in the tutorial to install things like npm, yeoman, and the blockstack app generator except on the godaddy server.

Thanks,
Pete

#7

You would just need to change where you are deploying the built site code. You’ll also need to supply CORS configs. Usually a directory called build in your repo.

The address you provided above in your initial posting is a netlify deploy URL. So, you would place the same set of files you deployed to netlify to GoDaddy.

You Netlify deployment isn’t complaining about CORS, so you must have configured that. Your GoDaddy may complain, depends.

#8

Ok. Thanks. Like I said I’ll start with Netlify by following the Animal Kingdom tutorial you suggested.

1 Like
#9

Hi MoxieGirl,

Just to clarify the address https://heuristic-brown-7a88f8.netlify.com/redirect.html is the one that you already had in the completed ios hello-world app I downloaded. I did not deploy or configure anything on netlify. You or someone else at blockstack did. That is why I am asking what files or folders I need to configure and move to a godaddy hosted server. Along with what services (ie npm) i need to install and start to deploy and run the app.

I have not looked at the Animal Kingdom example using Netlify but will try that today and see what I learn there that can be applied to deploying on godaddy if I choose to do that rather than stick with Netlify.

Since there are probably other mobile developers like me who are not knowledgeable on deploying web apps you might want to add a link in the ios tutorial to the Animal Kingdom tutorial for deploying your own production blockstack authentication app.

Thanks,
Pete

1 Like
#10

Hi Pete,

Shame on me and Aaron neither of us recognized that name. I’ll have to update that then…it should be clearly ours.d

Your suggestion to include “how to deploy” is a good one. I’ll create an article just for that outside of the tutorial.

Please let us know the outcome of your first web deploy.

#11

Hi MoxieGirl,

Rather than modify the hello-blockstack node.js app I created after following your tutorial at https://github.com/blockstack/blockstack-ios/blob/master/docs/tutorial.md I decided to go through the tutorial again to create a new node.js app with the app name and icon I have for MyWhereAbouts and then try deplying it on netlify. But now I ran into issues with the steps
yo blockstack:react
npm start

I skipped the first few steps of the tutorial to install cocoapods, yeoman and the blockstack app generator since I did these already and just created a mywhereabouts directory.

This time when ran yo blockstack:react I got the following warning messages.

npm WARN deprecated [email protected]: :raised_hands: Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

and then when I ran npm start it failed with the following

[email protected] start /Users/peterchmiel/Dev/blockstack/mywhereabouts
webpack-dev-server

events.js:167
throw er; // Unhandled ‘error’ event
^

Error: getaddrinfo ENOTFOUND localhost
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:26)
Emitted ‘error’ event at:
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1457:12)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/peterchmiel/.npm/_logs/2018-11-28T20_56_12_504Z-debug.log
MacBook-Pro:mywhereabouts peterchmiel$ ls
node_modules package.json webpack.config.js
package-lock.json src
MacBook-Pro:mywhereabouts peterchmiel$

I then ran npm install to see if that would update and fix anything and got the following

MacBook-Pro:mywhereabouts peterchmiel$ npm install
audited 8652 packages in 4.31s
found 3 vulnerabilities (1 moderate, 2 high)
run npm audit fix to fix them, or npm audit for details

So I ran npm audit and stopped at that point to add this reply and get your help since it says recommended action is a potentially breaking change.

MacBook-Pro:mywhereabouts peterchmiel$ npm audit

                   === npm audit security report ===

Run npm install [email protected] to resolve 1 vulnerability

SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ minimatch │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ blockstack │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ blockstack > hasprop > tape > glob > minimatch │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/118 │
└───────────────┴──────────────────────────────────────────────────────────────┘

Run npm install --save-dev [email protected] to resolve 1 vulnerability

SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High │ Missing Origin Validation │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ webpack-dev-server │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ webpack-dev-server [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ webpack-dev-server │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/725 │
└───────────────┴──────────────────────────────────────────────────────────────┘

Run npm install --save-dev [email protected] to resolve 1 vulnerability

SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ mime │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ url-loader [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ url-loader > mime │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/535 │
└───────────────┴──────────────────────────────────────────────────────────────┘

#12

Pete,

I’ve never had any problem just running npm audit fix when I run into this. You wanna just try it and see if you can move forward?

If that concerns you, let me know. We need to update our package.json, @shreyas is our maintainer. I’ll file an issue.

Mary

1 Like
#13

Hi Mary,

Still not able to run npm start. You mentioned that @shreyas needs to update your package.json. Wanted to see if I should wait for this or if there is something else I need to do to get it working.See details below…

I ran npm audit fix. It came back and said it fixed 0 of 3 vulnerabilities and I needed to run npm audit fix – force

fixed 0 of 3 vulnerabilities in 8652 scanned packages
3 package updates for 3 vulns involved breaking changes
(use npm audit fix --force to install breaking changes; or refer to npm audit for steps to fix these manually)

so I did that and got a bunch more warnings but it completed.
now when I run npm start I get the following error

Error: Cannot find module ‘webpack-cli/bin/config-yargs’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
at Function.Module._load (internal/modules/cjs/loader.js:506:25)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/peterchmiel/Dev/blockstack/mywhereabouts/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:1)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

#14

@petec I’m sorry you are having problems with this. I don’t think this error has to do with the version of Blockstack packaging.

RECAP: You have completed the IOS tutorial. That tutorial walks you through creating a redirect from a web app . Tho, the actual IOS implementation does not use this ultimately, the final IOS hello-world you use makes use of an app we have deployed on Netlify, here https://heuristic-brown-7a88f8.netlify.com/. So, you have an iOS shell, but not your own deployed hello-world web application.

Currently, the only sample application we have that shows a deployment is the animal kingdom. That has ascripts/build.js which packages the public directory and src directory and outputs to a deploy ready build directory. Unfortunately, none of our other sample applications are doing this step. At least that I am aware of.

Can you tar/zip your project directory – or your share your repo? I’ll see if I can build from my machine. Perhaps we can at least correct the package.json so it builds for you. Also helpful, let me know your build env – OS etc.

#15

Hi Mary,

Your recap is spot on. I tried again from scratch creating a new directory, running yo blockstack:react and npm install and it compiled and started this time. And the app works when I go to http://localhost:8080. I guess I needed to start from scratch and could not just run npm install after doing the npm audit fix.

I still got a bunch of warning messaging and vulnerabilities but like I said it compiled and ran. See below. Do I need to worry about these and run npm audit fix again or something else?

npm WARN deprecated [email protected]: :raised_hands: Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

> [email protected] install /Users/peterchmiel/Dev/mywhereabouts/node_modules/fsevents

> node install

[fsevents] Success: “/Users/peterchmiel/Dev/mywhereabouts/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node” already installed

Pass --update-binary to reinstall or --build-from-source to recompile

npm notice created a lockfile as package-lock.json. You should commit this file.

added 996 packages from 745 contributors and audited 8652 packages in 9.784s

found 3 vulnerabilities (1 moderate, 2 high)

run npm audit fix to fix them, or npm audit for details

Thanks,
Pete

#16

Also what files do I need to modify to customize the hello-blockstack node.js app. I added my app’s icon to the images folder and modified the SignIn.jsx file.

How do I change the text on this screen from “Hello, Blockstack” and are there any other files I need to modify

16
Screenshot 2018-11-30 13.27.16.png902×860 83.7 KB

#17

In the meantime I figured I would try to deploy what I have so as spelled out in the animal kingdom tutorial I ran ‘npm run build’ and got the following error

ERROR in index_bundle.js from UglifyJs

Unexpected token: name (e) [index_bundle.js:13364,8]

Child html-webpack-plugin for “index.html” :

[0] ./~/lodash/lodash.js 540 kB { 0 } [built]

[1] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 533 bytes { 0 } [built]

[2] (webpack)/buildin/global.js 509 bytes { 0 } [built]

[3] (webpack)/buildin/module.js 517 bytes { 0 } [built]

npm ERR! code ELIFECYCLE

npm ERR! errno 2

npm ERR! [email protected] build: webpack -p

npm ERR! Exit status 2

npm ERR!

npm ERR! Failed at the [email protected] build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/peterchmiel/.npm/_logs/2018-11-30T18_36_00_446Z-debug.log

Any suggestions on how to fix this?

#18

Hi @moxiegirl

Folllowing up to see if you have any solutions to these 2 issues

  1. npm run build produces the error

ERROR in index_bundle.js from UglifyJs

Unexpected token: name (e) [index_bundle.js:13364,8]

Wondering if have you tried running npm run build on the hello-blockstack node.js app from your tutorial and if you get the same or a different result.

  1. What files need to be modified to customize the hello-blockstack app?

I added my app’s icon to the images folder and modified the SignIn.jsx file. But not sure how to change the text on the select an id screen that currently says “Hello, Blockstack (localhost:8080) wants to read your basic info. Select an ID to use”

Thanks,
Pete Chmiel

#19

@petec I am sorry to hear you are still having problems.

  1. I haven’t tried running the npm build on the tutorial in the iOS tutorial. That section of the tutorial (noted in the tutorial) is illustrative. If you were building a production app, you could have the deployed web app in one project and the IOS in another. The big thing is the redirect back to mobile. @shreyas please correct me if I am wrong about that.

Have you tried just building the standard web HelloWorld in your environment? That would be good troubleshooting measure. https://docs.blockstack.org/browser/hello-blockstack.html

  1. If there is text you want to change in a copied repo, you’d just search for it in the project. Sounds like you did that and didn’t find it. The reason for that is some of the interactions in the application are part of the built-in Blocktack onboarding, meaning, you can’t change the messaging there it belongs to a project outside your control.

@shreyas is remote in India. I’ll point him to this in the forum. He’s our iOS guru and he may see something I haven’t.

#20

Hey @petec @moxiegirl, while I do own the iOS SDK this is a bit outside my area of expertise. I’m not familiar with those errors and not sure how to solve them, perhaps someone on the JS side can help.

@larry or @yukan any ideas?