Token-based authentication in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the Authorization header with the token.

Cypress

cy.request({ method: 'GET', url: '/api/data', headers: { Authorization: 'Bearer [1]' } })

Drag options to blanks, or click blank then click option'

AaccessToken

Btoken

CauthToken

DsessionId

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not hold the token.

Forgetting to prefix the token with 'Bearer '.

The Authorization header should include the access token, commonly named 'accessToken'.

2fill in blank

medium

Complete the code to save the token from the login response.

Cypress

cy.request('POST', '/api/login', { username: 'user', password: 'pass' }).then((response) => { cy.wrap(response.body.[1]).as('accessToken') })

Drag options to blanks, or click blank then click option'

Atoken

BsessionToken

CauthToken

Daccess_token

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect key names that do not exist in the response.

Not saving the token for later use.

The token is usually returned in the response body under the key 'access_token'.

3fill in blank

hard

Fix the error in the code to correctly use the saved token in the header.

Cypress

cy.get('@accessToken').then(([1]) => { cy.request({ method: 'GET', url: '/api/profile', headers: { Authorization: `Bearer ${token}` } }) })

Drag options to blanks, or click blank then click option'

Atoken

BaccessToken

CauthToken

DsessionToken

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name inside the callback than declared.

Not using template literals correctly.

The variable name in the callback must match the one used inside the function, here 'accessToken'.

4fill in blank

hard

Fill both blanks to create a test that logs in and uses the token to get user data.

Cypress

cy.request('POST', '/api/login', { username: 'user', password: 'pass' }).then((response) => { const [1] = response.body.access_token; cy.request({ method: 'GET', url: '/api/user', headers: { Authorization: `[2] ${accessToken}` } }) })

Drag options to blanks, or click blank then click option'

AaccessToken

BBearer

CToken

DAuthorization

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names for the token.

Missing the 'Bearer' prefix in the header.

The token is saved as 'accessToken' and the header must start with 'Bearer ' before the token.

5fill in blank

hard

Fill all three blanks to store the token, set it in headers, and assert the response status.

Cypress

cy.request('POST', '/api/login', { username: 'user', password: 'pass' }).then((response) => { const [1] = response.body.access_token; cy.request({ method: 'GET', url: '/api/dashboard', headers: { Authorization: `[2] ${accessToken}` } }).then((res) => { expect(res.status).to.equal([3]) }) })

Drag options to blanks, or click blank then click option'

AaccessToken

BBearer

C200

Dtoken

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names.

Omitting 'Bearer' in the header.

Asserting wrong status codes.

The token is saved as 'accessToken', the header uses 'Bearer', and the expected status code for success is 200.