Multiple Scope Values to oauth2 - oauth

Question

I try to post several scope values to allow my application for some google service...
I tried with two input field
<input type="hidden" name="scope" value="https://www.googleapis.com/auth/calendar" />
<input type="hidden" name="scope" value="https://www.googleapis.com/auth/userinfo.email" />
and with one input field with + separator
<input type="hidden" name="scope" value="https://www.googleapis.com/auth/calendar+https://www.googleapis.com/auth/userinfo.email" />
When I send my form with only one scope It work.
otherwise with sereval scope value google redirect me with this error description :
http://localhost:49972/redirect.aspx#error=invalid_request&error_description=OAuth+2+parameters+can+only+have+a+single+value:+scope&error_uri=http://code.google.com/apis/accounts/docs/OAuth2.html
In the google getting started with oAuth2 it works with two scope values.
Here is my code :
<form id="form1" method="post" action="https://accounts.google.com/o/oauth2/auth?" >
<div>
<input type="hidden" name="response_type" value="code" />
<input type="hidden" name="client_id" value="my client id" />
<input type="hidden" name="redirect_uri" value="http://localhost:49972/redirect.aspx" />
<input type="hidden" name="scope" value="https://www.googleapis.com/auth/calendar" />
<input type="hidden" name="scope" value="https://www.googleapis.com/auth/userinfo.email" />
<input type="hidden" name="state" value="/profile" />
<input type="submit" value="go" />
</div>
</form>

Answer 1

You were on the right track when you combined them to a single field
. There should be only one scope parameter in the request, with the values separated by spaces. If you're putting it in a form like that, the browser will take care of encoding the space for you.
<input type="hidden" name="scope" value="https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/userinfo.email" />

Answer 2

In addition to Steve Bazyl's answer. When applying multiple scopes for the same Google service, order of scopes seems to matter. F.e this string works as expected:
"https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.metadata.readonly"
while this one does not work for me:
"https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/drive"
I have not found any information about that in the docs though.

Answer 3

You can put all scopes in 1 array for clarity:
const scopes = [
'openid',
'https://www.googleapis.com/auth/userinfo.profile',
'https://www.googleapis.com/auth/userinfo.email',
'https://www.googleapis.com/auth/gmail.readonly',
]
const scope = scopes.join(' ')
console.log(scope)
// openid https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/gmail.readonly
const redirectUri = 'http://localhost:3000'
const link = `https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&scope=${scope}&response_type=code&client_id=${GOOGLE.clientId}&redirect_uri=${redirectUri}&state=authGoogle`