Skip to main content

​
Webview Authentication

MentraOS provides a simple and secure way for apps to identify users within webviews. When a user opens your web application through the MentraOS Mobile App, you can automatically identify them without requiring a separate login process. 
// Example of using webview authentication in your app
import {AppServer, AuthenticatedRequest} from "@mentra/sdk"

const server = new AppServer({
  packageName: "org.example.myapp",
  apiKey: process.env.API_KEY, // Load from environment variables
})

const app = server.getExpressApp()

app.get("/webview", (req: AuthenticatedRequest, res) => {
  const userId = req.authUserId

  if (userId) {
    // User is authenticated, show personalized content
    res.send(`Welcome user ${userId}!`)
  } else {
    // User is not authenticated
    res.send("Please open this page from the MentraOS app, or <a href='/mentra-auth'>login with Mentra</a>")
  }
})

​
What Is Webview Authentication?

Webview authentication lets your web application identify MentraOS users without requiring them to log in separately

​
When a user opens your webview through the MentraOS Mobile App:

  1. The manager app automatically appends a temporary authentication token to your URL
  2. The MentraOS SDK middleware automatically exchanges this token for the user’s ID
  3. Your webview can then provide a personalized experience based on the user’s identity

​
When a user opens your website in a regular browser (not the MentraOS app):

Want to let users access your app from a regular browser? Have them visit:https://account.mentra.glass/auth?packagename=your.package.nameThey’ll sign in with their Mentra account and be redirected to your app automatically.
Here’s what happens under the hood:
  1. Your app detects the user isn’t authenticated (no authUserId on the request).
  2. You redirect them to /mentra-auth, which the SDK handles automatically.
  3. The user is sent to account.mentra.glass/auth?packagename=your.package.name — a consent screen where they sign in with their Mentra account (email, Google, or Apple) and authorize your app.
  4. After the user clicks “Allow”, they are redirected back to your app’s webview URL with a signed token (aos_signed_user_token) in the query parameters.
  5. The SDK middleware automatically validates this token and sets req.authUserId.

​
How It Works

​
1. Include a Webview in Your App

First, specify a webview URL in your app’s configuration through the MentraOS Developer Console:
  1. Log in to the MentraOS Developer Console
  2. Navigate to your app’s settings
  3. Add your Webview URL
  4. Save your changes

​
2. Set Up Authentication with the SDK

The MentraOS SDK provides built-in middleware that handles the token exchange process automatically: 
import {AppServer, AuthenticatedRequest} from "@mentra/sdk"

// Create an app server instance
const server = new AppServer({
  packageName: "org.example.myapp",
  apiKey: process.env.API_KEY, // Load from environment variables, never check it into source control
})

// The SDK automatically sets up the authentication middleware

​
3. Access User ID in Your Routes

In your Express route handlers, access the authenticated user ID: 
const app = server.getExpressApp()

app.get("/webview", (req: AuthenticatedRequest, res) => {
  // Access the authenticated user ID
  const userId = req.authUserId

  if (userId) {
    // User is authenticated, provide personalized content
    res.render("dashboard", {
      userId,
    })
  } else {
    // User is not authenticated
    res.render("login", {
      message: "Please open this page from the MentraOS app",
    })
  }
})

​
4. Handle unauthenticated users with the OAuth flow

If the user opens your webview in a regular browser (not through the MentraOS app), they won’t have a token automatically. The SDK provides a built-in /mentra-auth route that redirects users to the Mentra OAuth consent screen. Add a “Sign in with Mentra” button to your unauthenticated view: 
<a href="/mentra-auth">
  <img src="https://account.mentra.glass/sign-in-mentra.png" alt="Sign in with Mentra" width="140" height="50" />
</a>
Sign in with Mentra You can use the “Sign in with Mentra” image as the login button: https://account.mentra.glass/sign-in-mentra.png When a user clicks “Sign in with Mentra”, they are redirected to: 
https://account.mentra.glass/auth?packagename=your.package.name
This is the Mentra OAuth consent screen. Here’s what happens:
  1. Sign in: If the user isn’t already signed in to their Mentra account, they are prompted to sign in (email, Google, or Apple).
  2. Consent: The user sees your app’s name, icon, and description, and is asked to authorize the app to access their basic profile.
  3. Redirect: After the user clicks “Allow”, they are redirected back to your app’s Webview URL (configured in the Developer Console) with a signed token appended: 
    https://your-app.com/webview?aos_signed_user_token=eyJ...&source=oauth
  4. Token validation: The SDK middleware automatically validates the token and sets req.authUserId on all subsequent requests.
The token issued during the OAuth flow expires after 10 minutes. After that, the user will need to re-authenticate. The SDK handles this automatically when the user returns through the MentraOS app.

​
Common Use Cases

Webview authentication enables:
  • Personalized dashboards and content
  • User-specific settings and preferences
  • Integration with your existing user database
  • Seamless experiences without additional login steps

​
React Webviews

If you want to build your frontend webview using React, see the React Webviews guide.