Error 'atob' on 'Window'

Question

Error 'atob' on 'Window'

Closed this issue 7 years ago · 15 comments

Hi Geovani, thank for this great idea of combining Next and Serverless into an npm package!

Can you give more information about how to launch this app, because when I do "npm i" and "npm start", I've the following error:
"Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."

Thanks a lot

Answer 1 · 2017-08-08T13:56:17.000Z

Hi @TLevesque , which versions of Node and NPM are you using?

Answer 2 · 2017-08-08T13:57:21.000Z

I'm using npm 5.3.0 and Node 7.6.0

Answer 3 · 2017-08-08T14:12:02.000Z

This seems really strange, I'd tested node 7.6 and both npm 4 and 5, and it worked.

Can you give more context about the steps you did?

Answer 4 · 2017-08-08T14:19:09.000Z

I've made a git clone from your repo, "npm i", "npm start". Then I got this error.
So I've tried too the other command of the json file "npm build", "npm deploy" and "npm emulate"
But, same error:
Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

Answer 5 · 2017-08-08T14:20:19.000Z

Which browser are you using?

Answer 6 · 2017-08-08T14:28:25.000Z

I'm on Chrome : Version 59.0.3071.115 (Build officiel) (64 bits)

Answer 7 · 2017-08-08T14:33:46.000Z

Ok, so, it seems that the problem is the token you are receiving/providing for the auth.

Precisely this line where it tries to decode the base64 encoded token. You could try to put a console.log (or a breakpoint depending on your tooling) to see what's being received. Considering that this value is picked from localStorage, there could be another place to look. Note: it assumes that your token is JWT

Answer 8 · 2017-08-08T14:41:11.000Z

I'm receiving this token "token-1495641146424"
And thanks a lot for your very fast support!!

Answer 9 · 2017-08-08T14:42:32.000Z

Nevermind, reach me if you face any other issue with this template 😃

Answer 10 · 2017-08-08T14:53:14.000Z

But, I still have this error, I think I've to set a token somewhere, do you have some clue on this?

Answer 11 · 2017-08-08T15:37:18.000Z

Each "protected" page is decorated with withAuth high-order component on React level. When you login, the page calls the Auth service, that fires the auth request, gets the response and set the token here.

Have you changed the auth function to respond with the "token-1495641146424" token?

P.S. Note to self: I need to write a proper README with a graphical explanation of the architecture

Answer 12 · 2017-08-08T17:11:13.000Z

I haven't changed any part of the code, I've just clone the repo and tried to run it...
Am I supposed to put a token or key somewhere?

Answer 13 · 2017-08-08T18:35:14.000Z

@TLevesque Actually, I totally forgot to tell you something: there is a docker-compose on the project to setup a locastack (awesome project, BTW), that is used to run locally. API's are failing silently while trying to communicate with it.

So, the steps are these (from project root):

Start the localstack: docker-compose up -d
Create tables (you will need the aws-cli):

aws --region=us-east-1 --endpoint-url=http://localhost:4569 dynamodb create-table --table-name notes --attribute-definitions AttributeName=userId,AttributeType=S AttributeName=noteId,AttributeType=S --key-schema AttributeName=userId,KeyType=HASH AttributeName=noteId,KeyType=RANGE --provisioned-throughput ReadCapacityUnits=5,WriteCapacityUnits=5

This is only for dev/test purpose, and doesn't affect how the project would operate on prod (I think).

Answer 14 · 2017-08-11T15:01:21.000Z

Hello Geovani, I still have the same issue...
I've installed Docker and I've run:

docker-compose up -d and got the message: serverlessnext_localstack_1 is up-to-date

I've installed Python 3, AWS-CLI, Setup User with the credentials, run:

aws --region=us-east-1 --endpoint-url=http://localhost:4569 dynamodb create-table --table-name notes --attribute-definitions AttributeName=userId,AttributeType=S AttributeName=noteId,AttributeType=S --key-schema AttributeName=userId,KeyType=HASH AttributeName=noteId,KeyType=RANGE --provisioned-throughput ReadCapacityUnits=5,WriteCapacityUnits=5

Which returned :

{
    "TableDescription": {
        "TableArn": "arn:aws:dynamodb:ddblocal:000000000000:table/notes", 
        "AttributeDefinitions": [
            {
                "AttributeName": "userId", 
                "AttributeType": "S"
            }, 
            {
                "AttributeName": "noteId", 
                "AttributeType": "S"
            }
        ], 
        "ProvisionedThroughput": {
            "NumberOfDecreasesToday": 0, 
            "WriteCapacityUnits": 5, 
            "LastIncreaseDateTime": 0.0, 
            "ReadCapacityUnits": 5, 
            "LastDecreaseDateTime": 0.0
        }, 
        "TableSizeBytes": 0, 
        "TableName": "notes", 
        "TableStatus": "ACTIVE", 
        "KeySchema": [
            {
                "KeyType": "HASH", 
                "AttributeName": "userId"
            }, 
            {
                "KeyType": "RANGE", 
                "AttributeName": "noteId"
            }
        ], 
        "ItemCount": 0, 
        "CreationDateTime": 1502462659.108
    }
}

And from that I've run "npm i" again and "npm start", and the terminal is displaying:

> serverless-next@1.0.0 start /Users/thibaut/Clients/test/Serverless-NextJS/serverless-next
> concurrently -p '{name}' -n 'next,serverless' -c 'gray.bgWhite,yellow.bgBlue' "next" "serverless offline --port 4000"

next > Using external babel configuration
next > location: "/Users/thibaut/Clients/test/Serverless-NextJS/serverless-next/.babelrc"
next > Using "webpack" config function defined in next.config.js.
serverless Serverless: Starting Offline: dev/us-east-1.
serverless 
serverless Serverless: Routes for web:
serverless Serverless: GET /
serverless Serverless: GET /_next/{proxy*}
serverless 
serverless Serverless: Routes for api:
serverless Serverless: ANY /n/{proxy*}
serverless Serverless: Configuring Authorization: /n/{proxy+} authorization
serverless 
serverless Serverless: Routes for authentication:
serverless Serverless: POST /auth
serverless 
serverless Serverless: Routes for authorization:
serverless Serverless: (none)
serverless  
serverless   Error --------------------------------------------------
serverless  
serverless   listen EADDRINUSE 127.0.0.1:4000
serverless  
serverless      For debugging logs, run again after setting the "SLS_DEBUG=*" environment variable.
serverless  
serverless   Get Support --------------------------------------------
serverless      Docs:          docs.serverless.com
serverless      Bugs:          github.com/serverless/serverless/issues
serverless      Forums:        forum.serverless.com
serverless      Chat:          gitter.im/serverless/serverless
serverless  
serverless   Your Environment Information -----------------------------
serverless      OS:                     darwin
serverless      Node Version:           7.6.0
serverless      Serverless Version:     1.19.0
serverless  
serverless serverless offline --port 4000 exited with code 1
next Node#before is deprecated. Use Node#raws.before
next  DONE  Compiled successfully in 5473ms16:54:24
next 
next > Ready on http://localhost:3000
next Client pings, but there's no entry for page: /
next > Building page: /
next  DONE  Compiled successfully in 2087ms16:54:32
next 
next  WAIT  Compiling...16:54:33
next 
next  DONE  Compiled successfully in 150ms16:54:33
next

But on localhost:3000, I still have the same "token-1495641146424" when I logit and the same error :

Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at AuthService.isTokenExpired (http://localhost:3000/_next/1502463358591/page/:99:18)
    at AuthService.isLoggedIn (http://localhost:3000/_next/1502463358591/page/:83:31)
    at Layout.componentDidMount (http://localhost:3000/_next/1502463358591/page/:374:40)
    at Layout.proxiedComponentDidMount (http://localhost:3000/_next/1502463358591/commons.js:35475:40)
    at http://localhost:3000/_next/1502463358591/commons.js:27304:25
    at measureLifeCyclePerf (http://localhost:3000/_next/1502463358591/commons.js:27115:12)
    at http://localhost:3000/_next/1502463358591/commons.js:27303:11
    at CallbackQueue.notifyAll (http://localhost:3000/_next/1502463358591/commons.js:12077:22)
    at ReactReconcileTransaction.close (http://localhost:3000/_next/1502463358591/commons.js:32199:26)
    at ReactReconcileTransaction.closeAll (http://localhost:3000/_next/1502463358591/commons.js:5703:25)

Do you have any clue about what is failing?

Thanks

Answer 15 · 2017-08-11T18:36:47.000Z

Hello Thibaut, do you having something else running on port 4000? Any chance to be that thing that is responding with the token-... response?