No Authenticator pop-up in node.js "SAFE Desktop App Tutorial" tutorial


#1

I’m going through the node.js SAFE Desktop App Tutorial and have run into an issue.

When I get to the following part it does not match what happens for me:

You should have had the Authenticator to show a pop-up with the authorisation request with the information of the application.

For me there is no pop-up in Peruse.

I have never programmed in JavaScript before, so I have no idea what I’m doing.

I tried breaking my code by removing a {, and then ran npm start, and it didn’t complain at all. So I’m suspecting that my code is not getting used for some reason. Anyone got any idea what could be going on?

I’m on Windows 10, if it matters.


SAFE Drive - help with testing
#2

Can you confirm that the first npm start under " Create basic skeleton" displayed a window as expected?

If that’s correct, where you are in the tutorial page and can you include a copy of your main.js file in your post?


#3

Yeah the window comes up, and it does that even if I remove some random } for instance, which I guess should bring about a syntax error? Don’t know if it does in JavaScript.

I am at the part that says:

You should have had the Authenticator to show a pop-up with the authorisation request with the information of the application.

I haven’t edited the main.js, it’s the same as in the git repo:

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })

  const shouldQuit = app.makeSingleInstance(function(commandLine) {
    const resAuthUri = commandLine[2];
    if (resAuthUri) {
      mainWindow.webContents.send('system-uri-response', resAuthUri);
    }

    // Someone tried to run a second instance, we should focus our window
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore();
      mainWindow.focus();
    }
  });

  if (shouldQuit) {
    app.quit();
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

app.on('open-url', (e, resAuthUri) => {
  mainWindow.webContents.send('system-uri-response', resAuthUri);
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

I’ve only edited the safenetwork.js file so far, as instructed in the tutorial.


#4

I’m going to go through the tutorial myself (on Linux) so we’re at the same point, but in the mean time I have some suggestions in case you haven’t done this before.

Firstly, from the Window showing “Hello SAFE Network!” you can open the Chrome debugger by choosing View > Toggle Developer Tools (Ctrl-Shift-I).

From there you can navigate to the source code for safenetwork.js. Click the Sources tab and then navigate to your examples folder under ‘(no domain)’ and there you will find safenetwork.js

Click on the file you want to view, and you can set breakpoints, step through the code etc.

Also, note the Console tab. This is where errors and output from console.log() will appear (or when you get to the safenetwork-fuse code you’ll see I use debug() for console ouput).

Let me know if you already know this stuff!

UPDATE:

I have reached the second npm start which I think is where you are.

Here’s what I have in my safenetwork.js at that point (forget main.js, I hadn’t looked at the tutorial properly when I asked about that, sorry!):

const app = require('electron').remote.app;
const safeNodeApp = require('@maidsafe/safe-node-app');

const customExecPath = [process.execPath, app.getAppPath()];
let safeApp;

async function sendAuthRequest() {
  console.log('Authorising SAFE application...');
  const appInfo = {
    // User-facing name of our app. It will be shown
    // in the Authenticator user's interface.
    name: 'Hello SAFE Network',
    // This is a unique ID of our app
    id: 'net.maidsafe.tutorials.desktop-app',
    version: '0.1.0',
    vendor: 'MaidSafe.net Ltd.',
    bundle: 'com.github.electron',
    customExecPath
  };

  const opts = {
    forceUseMock: true
  };

  safeApp = await safeNodeApp.initialiseApp(appInfo, null, opts);
  const authUri = await safeApp.auth.genAuthUri({});
  await safeApp.auth.openUri(authUri);
}

async function uponAuthResponse(resAuthUri) {
}

async function getItems() {
  return [];
};

async function insertItem(key, value) {
};

async function updateItem(key, value, version) {
};

async function deleteItems(items) {
};

module.exports = {
  sendAuthRequest,
  uponAuthResponse,
  getItems,
  insertItem,
  updateItem,
  deleteItems
};

It is now that you should start the Peruse Browser and log in, but be sure you have the ‘dev’ browser, so for Windows you want:

Peruse-v0.7.0-win-x64-dev.zip

From here: https://github.com/maidsafe/safe_browser/releases/tag/peruse-browser-0.7.0

When you run the dev browser I think it uses the mock network by default, but to be sure you might want to set your environment variable NODE_ENV to ‘dev’ before running it.

You could try to login with the password mocksafenetworkdeveloper but I’m not sure if that works, so to start I suggest you just create and account with that or a similar password and the same ‘secret’. Then runnpm start, open the debugger (Ctrl-Shift-I or View/Toggle Developer Tools) and take it from there.

Let me know how you get on!

With the above safenetwork.js and Peruse dev running, when I do:

npm start

I do get the Auth popup n Peruse.

If you still don’t, compare your safenetwork.js with mine. I think the Tutorial is not very clear and you have to know what you’re doing before you do it or you (as I did at first) may well not get it right.


@dgeddes I think the tutorials need to be clearer. For example, build up the code step by step and show cumulative progress of the whole file. So if the Tutorial starts with a load of code (as currently) it should show that, highlight what is being changed, and show the resulting code before each ‘run’, otherwise it is quite hard for somebody who doesn’t know quite a lot already to get it right. I got it wrong, and I suspect this might be why @lukas is stuck.


#5

Hi Mark,

Yeah, we are looking to expand on these - it’s been a matter of resource at the moment.
I know that’s a bit of an excuse but we’re really all focussed on this push for A3.

I’ll try to get some traction…

David.


#6

EDIT 2:
In the end it turns out I was confused by some of the instructions, maybe combined with some issues specific to my laptop.

I had issues with this part:

Specifically this part:

Windows users in Command Prompt, will first need to run set NODE_ENV=dev , then run npm install @maidsafe/safe-node-app --save .
If using Windows PowerShell, run $env:NODE_ENV = "dev" .

To my brain, this gives me two options:

  1. If using Command Prompt: do set NODE_ENV=dev , then run npm install @maidsafe/safe-node-app --save.
  2. If using PowerShell: do $env:NODE_ENV = "dev".

This makes no sense when I look closer at what’s going on, but since I had no idea what I’m doing I just tried to follow the instructions.

These sections should probably be split up into something like:

Linux and Mac

$ NODE_ENV=dev npm install @maidsafe/safe-node-app --save

Windows

If using Command Prompt (not PowerShell):

set NODE_ENV=dev
`npm install @maidsafe/safe-node-app --save

If using PowerShell:

`$env:NODE_ENV = "dev"`
`npm install @maidsafe/safe-node-app --save

This makes it easy for the learner to see what instructions apply to them.

Thank you for the help @happybeing, it’s very appreciated! Now to continue with this tutorial.

EDIT:
Disregard this message for now, I think might I have done a step wrong in the tutorial and am running into another issue when I do that step. So going to try to figure that out.

Original message

That console is really useful to have, it shows me errors. That is essential to have in the tutorial because otherwise people might not know if they’ve misspelled something etc,

To be sure that everything is as it should, in the ..\safe_examples\safe_app_electron_quick_start\ directory, I did a git checkout * then I did npm install, and then replaced my entire safenetwork.js file’s content with the one you wrote here.

When I then do npm start I get the following output in the console:

module.js:487 Uncaught Error: Cannot find module '@maidsafe/safe-node-app'
    at Module._resolveFilename (module.js:485:15)
    at Function.Module._resolveFilename (D:\Project\program\javascript\safe_examples\safe_app_electron_quick_start\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:35:12)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\Project\program\javascript\safe_examples\safe_app_electron_quick_start\safenetwork.js:2:21)
    at Object.<anonymous> (D:\Project\program\javascript\safe_examples\safe_app_electron_quick_start\safenetwork.js:54:3)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
angular.js:5041 Uncaught Error: [$injector:modulerr] Failed to instantiate module tripsPlanner due to:
Error: [$injector:nomod] Module 'tripsPlanner' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

https://errors.angularjs.org/1.7.4/$injector/modulerr?p0=tripsPlanner&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'tripsPlanner'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.4%2F%24injector%2Fnomod%3Fp0%3DtripsPlanner%0A%20%20%20%20at%20file%3A%2F%2F%2FD%3A%2FProject%2Fprogram%2Fjavascript%2Fsafe_examples%2Fsafe_app_electron_quick_start%2Fnode_modules%2Fangular%2Fangular.js%3A138%3A12%0A%20%20%20%20at%20file%3A%2F%2F%2FD%3A%2FProject%2Fprogram%2Fjavascript%2Fsafe_examples%2Fsafe_app_electron_quick_start%2Fnode_modules%2Fangular%2Fangular.js%3A2290%3A17%0A%20%20%20%20at%20ensure%20(file%3A%2F%2F%2FD%3A%2FProject%2Fprogram%2Fjavascript%2Fsafe_examples%2Fsafe_app_electron_quick_start%2Fnode_modules%2Fangular%2Fangular.js%3A2211%3A38)%0A%20%20%20%20at%20module%20(file%3A%2F%2F%2FD%3A%2FProject%2Fprogram%2Fjavascript%2Fsafe_examples%2Fsafe_app_electron_quick_start%2Fnode_modules%2Fangular%2Fangular.js%3A2288%3A14)%0A%20%20%20%20at%20file%3A%2F%2F%2FD%3A%2FProject%2Fprogram%2Fjavascript%2Fsafe_examples%2Fsafe_app_electron_quick_start%2Fnode_modules%2Fangular%2Fangular.js%3A5017%3A22%0A%20%20%20%20at%20forEach%20(file%3A%2F%2F%2FD%3A%2FProject%2Fprogram%2Fjavascript%2Fsafe_examples%2Fsafe_app_electron_quick_start%2Fnode_modules%2Fangular%2Fangular.js%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(file%3A%2F%2F%2FD%3A%2FProject%2Fprogram%2Fjavascript%2Fsafe_examples%2Fsafe_app_electron_quick_start%2Fnode_modules%2Fangular%2Fangular.js%3A5001%3A5)%0A%20%20%20%20at%20createInjector%20(file%3A%2F%2F%2FD%3A%2FProject%2Fprogram%2Fjavascript%2Fsafe_examples%2Fsafe_app_electron_quick_start%2Fnode_modules%2Fangular%2Fangular.js%3A4918%3A19)%0A%20%20%20%20at%20doBootstrap%20(file%3A%2F%2F%2FD%3A%2FProject%2Fprogram%2Fjavascript%2Fsafe_examples%2Fsafe_app_electron_quick_start%2Fnode_modules%2Fangular%2Fangular.js%3A1942%3A20)%0A%20%20%20%20at%20bootstrap%20(file%3A%2F%2F%2FD%3A%2FProject%2Fprogram%2Fjavascript%2Fsafe_examples%2Fsafe_app_electron_quick_start%2Fnode_modules%2Fangular%2Fangular.js%3A1963%3A12)
    at angular.js:138
    at angular.js:5041
    at forEach (angular.js:387)
    at loadModules (angular.js:5001)
    at createInjector (angular.js:4918)
    at doBootstrap (angular.js:1942)
    at bootstrap (angular.js:1963)
    at angularInit (angular.js:1848)
    at angular.js:36212
    at HTMLDocument.trigger (angular.js:3501)

I get the same error output no matter if I’m logged into the mock network or not.

I also tried copying the code straight from the tutorial, got the same errors.

I tried restarting my computer to make sure there was nothing weird going on there.

Thanks a lot for helping me figure out this issue, it’s very appreciated!


#7

No problem @lukas, I’m happy to help and glad you’re making progress. I agree with you on the tutorial that the information can be presented in a clearer way. I find it hard to follow even knowing what to do so keep giving feedback on that and @DGeddes can collect it together.

David, also note @lukas’ comments which he’s hidden under “Original message”, including this:

That console is really useful to have, it shows me errors. That is essential to have in the tutorial because otherwise people might not know if they’ve misspelled something etc

I agree that how to debug needs to be covered, maybe right there or if not perhaps in a separate page, but with a links from the tutorial in a appropriate places. Such as a general one near the start that mentions ‘instructions on how to debug your code’ and then when the tutorial first asks the reader to run something, repeat the link as a way to find out what’s going wrong.

On second thoughts I think best to focus on making the tutorial foolproof, and covering debugging in a separate one once something simple has been achieved.

Probably also more screenshots so people know what they should see, including the output from command line instructions so people can see at each stage if they are still on track and spot when something went wrong as soon as possible.

Some ideas anyway! :slight_smile: