Skip to main content

Quickstart for OpenID Connect authentication

Overview​

OpenID Connect (OIDC) is a protocol for authentication that builds on the OAuth 2.0 authorization framework. This quickstart describes how to quickly integrate Sky Mavis Account in an example app using the authentication flows supported by OIDC:

  • Authorization code flow for apps that have a backend that can communicate with Sky Mavis Account.
  • Implicit flow for apps that have no “backend” logic on the web server, like a Javascript app.
  • Resource Owner Password Credentials (ROPC) flow that doesn't have a login UI and is useful when access to a web browser isn't possible.

The integration allows users sign in to your app with their Sky Mavis account and access protected resources in the app.

The oidc-quickstart repository contains sample client apps in various languages and frameworks, such as JavaScript vanilla, Next.js, browser extension, Electron, and Unity.

Integration flow​

Before you start​

Before you start integrating the example app with Sky Mavis Account, make sure you have the following:

  • Node.js version 16.17.0 or later.
  • pnpm version 7.5.2 or later.
  • API key, access to the Sky Mavis Account service, and fully configured OAuth 2.0 settings. For more information, see Get started.

Environment variables​

The following is a list of the environment variables used in the oidc-quickstart repository:

# APP KEY
API_KEY=<your_api_key>

# OIDC ENV
OIDC_CLIENT_ID=<your_client_id>
OIDC_CLIENT_SECRET=<your_client_secret>
OIDC_SCOPE="openid offline"
OIDC_CALLBACK_URL=http://localhost:3000/oauth2/callback

# OIDC ENDPOINTS
OIDC_AUTHORIZATION_ENDPOINT=https://api-gateway.skymavis.com/oauth2/auth
OIDC_TOKEN_ENDPOINT=https://api-gateway.skymavis.com/account/oauth2/token
OIDC_USERINFO_ENDPOINT=https://api-gateway.skymavis.com/account/userinfo
OIDC_JWKS_ENDPOINT=https://api-gateway.skymavis.com/account/.well-known/jwks.json

# SERVER ENDPOINTS: YOUR SERVER APIs
SERVER_TOKEN_ENDPOINT=http://localhost:8080/oauth2/authorization-code/token
SERVER_REFRESH_TOKEN_ENDPOINT=http://localhost:8080/oauth2/authorization-code/refresh_token
SERVER_ROPC_TOKEN_ENDPOINT=http://localhost:8080/oauth2/ropc/token
SERVER_ROPC_MFA_ENDPOINT=http://localhost:8080/oauth2/ropc/mfa
SERVER_USERINFO_ENDPOINT=http://localhost:8080/oauth2/userinfo
SERVER_RONIN_NONCE_ENDPOINT=http://localhost:8080/oauth2/ronin/fetch-nonce
SERVER_RONIN_TOKEN_ENDPOINT=http://localhost:8080/oauth2/ronin/token

# ELECTRON ENV
CALLBACK_DEEPLINK=mavis-electron-app://oauth2/callback

# CAPTCHA ENV
GEETEST_ENDPOINT=https://captcha.skymavis.com/api/geetest/register

Integrate Sky Mavis Account​

Clone the repository​

Clone the oidc-quickstart repository:

git clone git@github.com:axieinfinity/oidc-quickstart.git

Select your example app​

Choose the client app of your interest from the ./client folder.

Set up environment variables​

Set up the .env file according to the provided .env.example file in the example client app.

Run the Node.js server​

Navigate to the ./server/nodejs folder and execute the following commands:

cd server/nodejs
pnpm install && pnpm dev

Start the client app​

Navigate to your chosen example app in the ./client folder, install the required packages, and start the application:

cd client/oidc-nextjs-ropc
pnpm install && pnpm dev

Next steps​

Was this helpful?
Happy React is loading...