Multiple Scope Values to oauth2

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>

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" />

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.

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`