Damian Schenkelman

Damian was one of Auth0's earliest employees. He loves building products for developers and taking things from 0 to 1.
<br><br>
He played key roles in implementing product features and growing the engineering organization in the early stages, and later on defining Auth0's architecture for scale and creating new products. Today he helps shape Auth0's long term strategy and leads Auth0Lab, a small and amazing team doing research and development of forward-looking products.
<br><br>
He spends his spare time with family, and friends, exercising, and catching up on all things NBA.

VP R&D (Auth0Lab)

Production-ready AI agents need to be secure, and auth is a big part of security. Auth0 is partnering with Google Cloud to help deliver secure authentication for the Agent2Agent (A2A) protocol.

## What Is the Agent2Agent Protocol?

[Agent2Agent (or A2A)](https://developers.googleblog.com/en/a2a-a-new-era-of-agent-interoperability/) is a new open interoperability protocol created by Google Cloud, and launched a month ago,  with support and contributions from 60+ companies.

It aims to allow agents to communicate with other agents regardless of their implementation framework or tech stack. For example, a “client” agent should be able to communicate with server agents implemented with LangGraph, Google ADK, Vercel AI SDK, any other agentic framework, or any agent implemented without one.

![A2A Protocol](https://images.ctfassets.net/23aumh6u8s0i/RYuhvCQkWJzgSl1ZoZGqj/62881d062e978f8d733ed58ad743e3bf/01_Agent2Agent_protocol.png)

## Why Is Auth Important for AI Agents?

As companies and developers deploy AI agents into production, interactions between these agents will be common. And naturally, these interactions need to be secure.

We can say that each AI agent can act as a client (when requesting data from other AI agents) and as a server (when responding to data requests from other AI agents).

![A2A Protocol](https://images.ctfassets.net/23aumh6u8s0i/54RtL5WuaBcv9Tu1He2ngO/4131696834c22e88ec061edad4d07dab/02_Agent2Agent_protocol.png)

So we ended up with some auth-related questions that needed to be answered. These matters are important when implementing any system, and agentic systems are no exception. But there are also a few questions that become more prevalent with the rise of AI agents:

* **Authentication:** How does the server agent know who is trying to perform an action?
* **Delegation:** Is the agent acting on its behalf, or on behalf of a user?
* **Consent:** If the client is acting on behalf of a user, how does the user consent to this operation?
* **Authorization:** How does the server agent know if the caller can perform the action (e.g., call a specific tool)? If the client is acting on behalf of a user, is the user authorized to perform this action?
* **Auth for headless agents (agents without a UI):** How should AI agents without a UI authenticate users?
* **Fine-grained authorization:** How do we ensure AI agents only have the permissions they need to perform their task, and not more?

## What Are We Partnering On?

A2A is being designed to support enterprise-grade authentication and authorization from day one. This means the protocol should be able to provide good answers to those questions and support all of those scenarios in multi-agent systems built with A2A.

We are working with Google Cloud to define A2A auth specs based on secure standards and build SDKs and code samples that showcase A2A auth capabilities. This will include how to integrate A2A with [Auth0](https://auth0.com/) and our new product [Auth for GenAI](https://auth0.com/ai), providing both great security and great auth user experiences.

## How Does Auth Work in A2A?

Agents expose how they operate via [Agent Cards](https://google.github.io/A2A/topics/key-concepts/#fundamental-communication-elements), which include what they can do, how they can communicate (e.g. support streaming?), and how clients should authenticate to them following the [OpenAPI spec](https://github.com/google/A2A/pull/359). Clients use the Agent Card to discover agents and understand how to interact with them.

For example, this agent card defines an HR agent as someone who can receive an email and reply if a person works at a company or not. Clients can authenticate by obtaining an access token via a [client credentials](https://auth0.com/docs/get-started/authentication-and-authorization-flow/client-credentials-flow) OAuth flow and then providing the token to the agent to authenticate.


```py
AgentCard(
    name='Staff0 HR Agent',
    description='This agent handles external verification requests about Staff0 employees made by third parties.',
    url=f'http://{host}:{port}/',
    version='1.0.0',
    defaultInputModes=HRAgent.SUPPORTED_CONTENT_TYPES,
    defaultOutputModes=HRAgent.SUPPORTED_CONTENT_TYPES,
    capabilities=AgentCapabilities(streaming=True),
    skills=[
        AgentSkill(
            id='is_active_employee',
            name='Check Employment Status Tool',
            description='Confirm whether a person is an active employee of the company.',
            tags=['employment status'],
            examples=[
                'Does John Doe with email jdoe@staff0.com work at Staff0?'
            ],
        )
    ],
    securitySchemes={
        'oauth2_m2m_client': OAuth2SecurityScheme(
            description='',
            flows=OAuthFlows(
                authorizationCode=ClientCredentialsOAuthFlow(
                    tokenUrl=f'https://{os.getenv("HR_AUTH0_DOMAIN")}/oauth/token',
                    scopes={
                        'read:employee_status': 'Allows confirming whether a person is an active employee of the company.',
                    },
                ),
            ),
        ),
    },
    security=[{
        'oauth2_m2m_client': [
            'read:employee_status',
        ],
    }],
)
```

One thing we have also been exploring with the Google Cloud team is how agents that don't have a UI (“headless agents”) should authenticate users. For these scenarios, we believe the [Client Initiated Backchannel Authentication](https://openid.net/specs/openid-client-initiated-backchannel-authentication-core-1_0.html) (CIBA) flow will be a very valuable tool for developers and architects. CIBA is an OpenID Connect flow that does not rely on redirects in the user's browser. Instead, Agents can reach out to users outside via push notification, email, SMS, etc., for them to authenticate. To give you an idea about what CIBA provides from a security standpoint, it can also be used to meet the strong auth requirements of [FAPI](https://openid.net/wg/fapi/) for financial transactions.

## A Working Sample

Enough chat, let's see some working code :) We've worked with the Google Cloud A2A team to build a demo showcasing these capabilities. Imagine a scenario where:

1. John Doe, who works at Staff0, wants to open a bank account by talking to a chatbot agent
2. Because of internal policies, the bank agent needs to verify that the user is an employee at Staff0, so it contacts the Staff0 HR agent.
3. The Staff0 HR agent can use the Staff0 HR API to check if the user is an employee or not.

For example, it could result in an application flow like this:

<iframe class="vidyard_iframe" title="Auth0 + Google A2A & ADK sample" src="//play.vidyard.com/utu4caQfTCBHbbnXDaWo9a.html" width="640" height="360" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe>

To make it simple to run such a sample, we uploaded it to the A2A [repo here](https://github.com/google-a2a/a2a-samples/tree/main/samples/python/agents/headless_agent_auth). The sample A2A client plays the part of the Bank Agent. When you run the demo, this is what happens behind the scenes:

![A2A Protocol](https://images.ctfassets.net/23aumh6u8s0i/4NIuz6gLOicE7kPjRnqvuG/25b9a819ef795458117927f488235919/03_Agent2Agent_protocol.png)

## Closing Thoughts

At Auth0 we believe AI has the potential to radically reshape software in general and identity in particular. We believe there will be an explosion in AI agents (non-human identities), which requires more security, finer grained access control and support for various delegation scenarios. 

We look forward to continuing our collaboration with Google Cloud, and helping builders secure their AI agents, both by contributing to AI protocols (e.g. MCP, A2A), new capabilities of [Auth for GenAI](https://auth0.ai/), and developing new products and features that enable an AI powered world.


Secure A2A Authentication with Auth0 and Google Cloud

Auth0 and Google Cloud are partnering to secure AI agent communication with the new Agent2Agent (A2A) protocol, ensuring robust authentication for the next generation of AI interactions.

Production-ready AI agents need to be secure, and auth is a big part of security. Auth0 is partnering with [Google Cloud](https://cloud.google.com/?hl=en) to help deliver secure authentication for the [Agent2Agent (A2A) protocol](https://developers.googleblog.com/en/a2a-a-new-era-of-agent-interoperability/).

### What is the Agent2Agent protocol?
Agent2Agent (or A2A) is a new open interoperability protocol created by Google Cloud, and launched a month ago,  with support and contributions from 60+ companies.

It aims to allow agents to communicate with other agents regardless of their implementation framework or tech stack. For example, a “client” agent should be able to communicate with server agents implemented with LangGraph, Google ADK, Vercel AI SDK, any other agentic framework or any agent implemented without one.

![](https://images.ctfassets.net/23aumh6u8s0i/6qm1UcMBH6arg4ynuBUBMJ/7c7c8117381a56dcd90117deea2fddbb/img_01.png)

### Why is auth important for AI agents?
As companies and developers deploy AI agents into production, interactions between these agents will be common. And naturally, these interactions need to be secure.

We can say that each AI agent can act as a client (when requesting data from other AI agents) and as a server (when responding to data requests from other AI agents).
![](https://images.ctfassets.net/23aumh6u8s0i/5Ku1FadhT8Jqg8EZ9PaiRG/a52b5ed2985a1e1b76cef7052602ff58/img_02.png)

So we end up with some auth-related questions to be answered. These matters are important when implementing any system, and agentic systems are no exception. But there are also a few questions that become more prevalent with the rise of AI agents:

- **Authentication:** How does the server agent know who is trying to perform an action?
- **Delegation:** Is the agent acting on its behalf, or on behalf of a user?
- **Consent:** If the client is acting on behalf of a user, how does the user consent to this operation?
- **Authorization:** How does the server agent know if the caller can perform the action (e.g. call a specific tool)?  If the client is acting on behalf of a user, is the user authorized to perform this action?
- **Auth for headless agents (agents without a UI):** How should AI agents without a UI authenticate users?
- **Fine-grained authorization:** How do we ensure AI agents only have the permissions they need to perform their task, and not more?

### What are we partnering on?
A2A is being designed to support enterprise-grade authentication and authorization from day one. This means the protocol should be able to provide good answers to those questions and support all of those scenarios in multi-agent systems built with A2A.

We are working with Google Cloud to define A2A auth specs based on secure standards, and build SDKs and code samples that showcase A2A auth capabilities. This will include how to integrate A2A with [Auth0](https://auth0.com/) and our new product [Auth for GenAI](https://auth0.com/ai), providing both great security and great auth user experiences.

### How does auth work in A2A?
Agents expose how they operate via [Agent Cards](https://google.github.io/A2A/topics/key-concepts/#fundamental-communication-elements), which include what they can do, how they can communicate (e.g. support streaming?), and how clients should authenticate to them following the [OpenAPI spec](https://github.com/google/A2A/pull/359). Clients use the Agent Card to discover agents and understand how to interact with them.

For example, this agent card defines an HR agent that can receive an email and reply if a person works at a company or not. Clients can authenticate by obtaining an access token via a [client credentials](https://auth0.com/docs/get-started/authentication-and-authorization-flow/client-credentials-flow) OAuth flow and then providing the token to the agent to authenticate.

```python
AgentCard(
    name='Staff0 HR Agent',
    description='This agent handles external verification requests about Staff0 employees made by third parties.',
    url=f'http://{host}:{port}/',
    version='1.0.0',
    defaultInputModes=HRAgent.SUPPORTED_CONTENT_TYPES,
    defaultOutputModes=HRAgent.SUPPORTED_CONTENT_TYPES,
    capabilities=AgentCapabilities(streaming=True),
    skills=[
        AgentSkill(
            id='is_active_employee',
            name='Check Employment Status Tool',
            description='Confirm whether a person is an active employee of the company.',
            tags=['employment status'],
            examples=[
                'Does John Doe with email jdoe@staff0.com work at Staff0?'
            ],
        )
    ],
    authentication=AgentAuthentication(schemes=['public']),
    securitySchemes={
        'oauth2_m2m_client': OAuth2SecurityScheme(
            description='',
            flows=OAuthFlows(
                authorizationCode=ClientCredentialsOAuthFlow(
                    tokenUrl=f'https://{os.getenv("HR_AUTH0_DOMAIN")}/oauth/token',
                    scopes={
                        'read:employee_status': 'Allows confirming whether a person is an active employee of the company.',
                    },
                ),
            ),
        ),
    },
    security=[{
        'oauth2_m2m_client': [
            'read:employee_status',
        ],
    }],
)
```

One thing we have also been exploring with the Google Cloud team is how agents that don't have a UI (“headless agents”) should authenticate users. For these scenarios we believe the [Client Initiated Backchannel Authentication (CIBA)](https://openid.net/specs/openid-client-initiated-backchannel-authentication-core-1_0.html) flow will be a very valuable tool for developers and architects. CIBA is an OpenID Connect flow that does not rely on redirects in the user's browser. Instead, Agents can reach out to users outside via push notification, email, SMS, etc. for them to authenticate. To give you an idea about what CIBA provides from a security standpoint, it can also be used to meet the strong auth requirements of FAPI for financial transactions.

### A working sample
Enough chat, let's see some working [code](https://github.com/google/A2A/tree/main/samples/python/agents/headless_agent_auth) :) We've worked with the Google Cloud A2A team to build a demo showcasing these capabilities. Imagine a scenario where:
 
1. John Doe, who works at Staff0 wants to open a bank account by talking to a chatbot agent
2. Because of internal policies, the bank agent needs to verify that the user is an employee at Staff0, so it contacts the Staff0 HR agent.
3. The Staff0 HR agent can use the Staff0 HR API to check if the user is an employee or not.

For example, it could result in an application flow like this:
<AmpContent>
<amp-youtube
    data-videoid="X22XNlRnHZU"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>
<NonAmpContent>
<iframe class="vidyard_iframe" title="Auth0 + Google A2A & ADK sample" src="//play.vidyard.com/utu4caQfTCBHbbnXDaWo9a.html?" width="640" height="360" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe>
</NonAmpContent> 

To make it simple to run such a sample, we uploaded it to the A2A repo here. The sample A2A client plays the part of the Bank Agent. When you run the demo, this is what happens behind the scenes:
![](https://images.ctfassets.net/23aumh6u8s0i/417VrO2pWfdEVy3TkATSS5/090672e74f0c822ae90dad8182c4cebe/img_03.png)

### Closing thoughts
At Auth0 we believe AI has the potential to radically reshape software in general and identity in particular. We believe there will be an explosion in AI agents (non-human identities), which requires more security, finer grained access control and support for various delegation scenarios. 

We look forward to continuing our collaboration with Google Cloud, and helping builders secure their AI agents, both by contributing to AI protocols (e.g. MCP, A2A), new capabilities of [Auth for GenAI](https://auth0.ai), and developing new products and features that enable an AI powered world.


[Duplicate] Secure A2A authentication with Auth0 and Google Cloud

deepu-sasidharan

Deepu is a polyglot developer, Java Champion, and OSS aficionado. He mainly works with Java, JS, Rust, and Golang. He co-leads JHipster and created the JDL Studio and KDash. He's a Staff Developer Advocate at Okta. He is also an international speaker and a published author.

Staff Developer Advocate

Deepu K Sasidharan

Learn how to build a tool-calling AI agent using LangGraph, Vercel AI SDK, and Next.js. Integrate different kinds of tools into them. Use Google services like Gmail, Calendar, and Drive as tools secured using Auth0 Token Vault.

**AI agents** and **Operators** are the next big things in software development. In a [previous post](https://auth0.com/blog/genai-tool-calling-intro/), we discussed how AI agents are taking center stage by seamlessly integrating with multiple digital tools to be more efficient. In this post, we will build a personal assistant that can use different types of tools. Both simple unauthenticated tools and more complex authenticated tools like Gmail, Calendar, and Google Drive.

If you haven't read the previous post, I recommend you do so before continuing to better understand tool calling in AI agents and how security is currently handled.

<include
 src="LinkCard"
 title="Tool Calling in AI Agents: Empowering Intelligent Automation Securely"
 link="https://auth0.com/blog/genai-tool-calling-intro/"
 description="Discover how AI agents are taking center stage by seamlessly integrating with multiple digital tools to be more efficient. Learn why it is important to secure them."
 img="https://images.ctfassets.net/23aumh6u8s0i/4LrNhImjPcdPVpmCIrhlG9/4efed8dfb26630e6cf48b4a478a1f550/genai-tool-calling-intro.png"
/>

To keep this post focused on tool calling, we will only focus on the AI agent part, not the UI. Each tutorial step, including building the UI, can be found as a distinct commit in the [GitHub repository](https://github.com/auth0-samples/auth0-assistant0).

## Technology Stack

We will use a [Next.js](https://nextjs.org/) application called **Assistant 0** as the base. Assistant 0 is an AI personal assistant that consolidates your digital life by dynamically accessing multiple tools to help you stay organized and efficient.

Apart from Next.js, we mainly use the following technologies:

- [LangGraph.js](https://langchain-ai.github.io/langgraphjs/) and [LangChain's JavaScript framework](https://js.langchain.com/docs/introduction/) for building agentic workflows.
- [LangChain community tools](https://js.langchain.com/docs/integrations/tools/).
- Vercel's [AI SDK](https://github.com/vercel-labs/ai) to stream response tokens to the client and display the incoming messages.
- The [Auth0 AI SDK](https://github.com/auth0-lab/auth0-ai-js) and [Auth0 Next.js SDK](https://github.com/auth0/nextjs-auth0) to secure the application and call third-party APIs.

## Prerequisites

> **You will need the following tools and services to build this application**:
>
> - [Bun v1.2](https://bun.sh/) or [NodeJS v20](https://nodejs.org/en/download)
> - An Auth for GenAI account. [Create one](https://a0.to/ai-content).
> - An OpenAI account and API key. [Create one](https://platform.openai.com) or use any [other LLM provider supported by LangChain](https://js.langchain.com/docs/integrations/llms/).
> - A SerpAPI account and API key. [Create one](https://serpapi.com/).
> - A Google account for Gmail, Calendar, and Drive. Preferably a new one for testing.

## Getting Started

First clone [the repository](https://github.com/auth0-samples/auth0-assistant0) and install the dependencies:

```bash
git clone https://github.com/auth0-samples/auth0-assistant0.git
cd auth0-assistant0
git switch step-1 # so that we skip building the UI and get straight to the AI agent

bun install # or npm install
```

Next, you'll need to set up environment variables in your repo's `.env.local` file. Copy the `.env.example` file to `.env.local`. To start, you'll just need to add your OpenAI API key.

Now, start the development server:

```bash
bun dev # or npm run dev
```

Open `http://localhost:3000` with your browser to see the result! Ask the agent something, and you'll see a streamed response.

![Assistant 0](https://images.ctfassets.net/23aumh6u8s0i/ePzgV9PLYqmwdsqdJC2VU/3507e783ee8199b6a5599742ef81fed7/assistant-0.png)

### A Peek into the Code

The application is structured as follows:

- `src/app`: Contains the Next.js application routes, layout, and pages.
- `src/app/page.tsx`: Home page with chat interface.
- `src/app/api/chat/route.ts`: API route for handling chat requests. This is where the AI agent is defined.
- `src/components`: UI components used in the application.
- `src/lib`: Services and configurations. This is where custom tools will be defined.
- `src/utils`: Utility functions

Let's take a look at the `src/api/chat/route.ts` file where the AI agent is defined.

```js
// src/api/chat/route.ts
// ...
const AGENT_SYSTEM_TEMPLATE = `You are a personal assistant named Assistant0.
You are a helpful assistant that can answer questions and help with tasks.
You have access to a set of tools, use the tools as needed to answer the user's question.`;

export async function POST(req: NextRequest) {
  // ... Process the request and get messages
  // Create a new OpenAI chat model
  const llm = new ChatOpenAI({ model: "gpt-4", temperature: 0 });
  const tools = [];
  // Use a prebuilt LangGraph agent.
  const agent = createReactAgent({
    llm,
    tools,
    messageModifier: new SystemMessage(AGENT_SYSTEM_TEMPLATE),
  });
  // Stream back all generated tokens and steps from their runs.
  const eventStream = agent.streamEvents({ messages }, { version: "v2" });
  // Log tool calling data. Only in development mode
  const transformedStream = logToolCallsInDevelopment(eventStream);
  // Adapt the LangChain stream to Vercel AI SDK Stream
  return LangChainAdapter.toDataStreamResponse(transformedStream);
}
```

The route uses a prebuilt LangGraph agent and OpenAI chat model. No tools are defined yet; we will add them in the next section.

Here is a high-level architecture of the application with the tools we will be adding in this post.

![Assistant 0 architecture](https://images.ctfassets.net/23aumh6u8s0i/6ZTtsivmBOPUmKGWx479Xm/d8d90c3bf3f24f1c8ce99ff703a1ba7d/architecture.jpg)

Now that the base application is running, let's start building our personal assistant with tool-calling capabilities.

## Add Tools to the Assistant

If you recall the previous post, we discussed authenticated and unauthenticated tools. Let's start with an unauthenticated tool and then proceed to add more complex tools like Gmail, Calendar, and Google Drive.

### Add a Calculator Tool

We will start with a simple calculator tool from the LangChain community tools to perform basic arithmetic operations.

Install the `@langchain/community` package.

```bash
bun add @langchain/community # or npm i @langchain/community
```

Update the `src/api/chat/route.ts` file with the following code.

```js
// src/api/chat/route.ts
import { Calculator } from "@langchain/community/tools/calculator";
// ...
export async function POST(req: NextRequest) {
  // ...
  const tools = [new Calculator()];
  // ...
}
```

It's that simple! Now, try asking the assistant to perform some calculations. For example, `what is (2+56) x 200`. You should see the answer in the UI. If you check the console where Next.js dev server (`bun dev`) is running, you should see the tool calling data like below.

```bash
Tool calls state: {
 "call_E3Za9klJcJ5TADWiMj8XfjdB": {
   "name": "calculator",
   "args": "{\n  \"input\": \"(2+56) * 200\"\n}"
 }
}
POST /api/chat 200 in 8382ms
```

### Add a Web Search Tool

Now let's add a web search tool to search the web for information. Let's use [SerpAPI](https://serpapi.com/) for this. It's an authenticated tool. But since this is going to be API usage and not a user impersonation, we can simply use an API key.

First, get an API key from SerpAPI and add that to your `.env.local` file.

```bash
SERPAPI_API_KEY=your-api-key
```

Now, update the `src/api/chat/route.ts` file with the following code.

```js
// src/api/chat/route.ts
import { SerpAPI } from "@langchain/community/tools/serpapi";
// ...
export async function POST(req: NextRequest) {
  // ...
  const tools = [new Calculator(), new SerpAPI()];
  // ...
}
```

Again, quite simple! Now try asking the assistant to search the web for information. For example, `What is the top 10 news today?`. You will see the response in the UI.

![Assistant 0 web search](https://images.ctfassets.net/23aumh6u8s0i/h4hWDQwBBTUiDh6gdaVET/137647c87dd51c6cc34ec0a44d6e453d/assistant-0-web-search.png)

If you check the console, you should see the tool calling data like the one below.

```bash
Tool calls state: {
 "call_e8vqAPW45vMsUbFiIF9SW5Yn": {
   "name": "search",
   "args": "{\n  \"input\": \"top 10 news today\"\n}"
 }
}
POST /api/chat 200 in 15443ms
```

This corresponds to the `step-2` branch in case you want to double-check your code.

```bash
git switch step-2
```

### Add Gmail Tools

Now, let's get into business. I know you are here for this part, not to learn about adding calculators and web search tools. But before we can add a Gmail tool, we need to add Auth0 authentication to the application since we will be using Auth0's [Token Vault](https://auth0.com/docs/secure/tokens/token-vault) feature to get access tokens to call the Gmail API via a tool.

#### Add Auth0 Authentication

First, let's add Auth0 as the authentication provider to the application.

Follow the [Auth0 Next.js quickstart guide](https://auth0.com/ai/docs/user-authentication) to set up the application.

> If you want to create the Auth0 application manually, create a new application (Type: **Regular Web App**, Callback URL: `http://localhost:3000/auth/callback`) and get the **client ID** and **client secret**.

Update the `.env.local` file with credentials, and create the `src/lib/auth0.ts` and `src/middleware.ts` files.

If you want to skip to the next step, check out the `step-3` branch. The [full changelog for this step is on GitHub](https://github.com/auth0-samples/auth0-assistant0/commit/9a6db1ec49511afa7c361080c3f5a1854ee8efe5).

```bash
git switch step-3
```

#### Configure Auth0 for Gmail

To use Gmail API with Auth0 via a Google Social Connection, you need to do the following:

- Create Google OAuth 2.0 credentials
- [Enable Gmail API](https://console.cloud.google.com/apis/library/gmail.googleapis.com) for the credentials
- Configure Gmail social connection in Auth0

You can follow the [Google Sign-in and Authorization](https://auth0.com/ai/docs/google-sign-in-and-auth) guide from Auth0 to configure this.

#### Configure Auth0 AI SDK

First, install the `@auth0/ai-langchain` package from [Auth0 AI SDK](https://github.com/auth0-lab/auth0-ai-js).

```bash
bun add @auth0/ai-langchain # or npm i @auth0/ai-langchain
```

Update `src/lib/auth0.ts` with the following code.

```js
// src/lib/auth0.ts
// ...
export const auth0 = new Auth0Client({
  // this is required to get federated access tokens from services like Google
  authorizationParameters: {
    access_type: "offline",
    prompt: "consent",
  },
});

// Get the refresh token from Auth0 session
export const getRefreshToken = async () => {
  const session = await auth0.getSession();
  return session?.tokenSet?.refreshToken;
};
```

Create a new `src/lib/auth0-ai.ts` file with the following code.

```js
// src/lib/auth0-ai.ts
import { Auth0AI } from "@auth0/ai-langchain";
import { getAccessTokenForConnection } from "@auth0/ai-langchain";
import { getRefreshToken } from "@/lib/auth0";

// Get the access token for a connection via Auth0
export const getAccessToken = async () => getAccessTokenForConnection();

const auth0AI = new Auth0AI();

// Connection for Google services
export const withGoogleConnection = auth0AI.withTokenForConnection({
  connection: "google-oauth2",
  scopes: [],
  refreshToken: getRefreshToken,
});
```

#### Add Gmail Search Tool

We can add Gmail tools now that we have Auth0 authentication in place. Let's start with a Gmail search tool. This tool will allow the assistant to search for emails in the user's Gmail account.

First, we need to get an access token for the Gmail API. We can get this using the [Auth0 Token Vault](https://auth0.com/docs/secure/tokens/token-vault) feature.

Update `src/lib/auth0-ai.ts` with the required scopes.

```js
// src/lib/auth0-ai.ts
// ...
export const withGoogleConnection = auth0AI.withTokenForConnection({
  // ...
  scopes: ["https://www.googleapis.com/auth/gmail.readonly"],
  // ...
});
```

Install the `googleapis` package.

```bash
bun add googleapis # or npm i googleapis
```

Import the `GmailSearch` tool from LangChain community tools and update the `src/api/chat/route.ts` file with the following code.

```js
// src/api/chat/route.ts
import { GmailSearch } from "@langchain/community/tools/gmail";
import { withGoogleConnection, getAccessToken } from "@/lib/auth0-ai";
// ...
export async function POST(req: NextRequest) {
  // ...
  // Update the LLM model to gpt-4o-mini to support a larger context window
  const llm = new ChatOpenAI({
    model: "gpt-4o-mini",
    temperature: 0,
  });
  // Provide the access token to the Gmail tools
  const gmailParams = {
    credentials: {
      accessToken: getAccessToken,
    },
  };
  const tools = [
    // ... existing tools
    withGoogleConnection(new GmailSearch(gmailParams)),
  ];
  // ...
}
```

We are all set! Now, try asking the assistant to search for emails. For example, `What is the latest unread email?`. You should see the response in the UI.

![Assistant 0](https://images.ctfassets.net/23aumh6u8s0i/14n2drq2woolLeJybBMWk6/3bbc575f92493dc2322f485a6b4f4ac9/assistant-0-gmail-search.png)

If you check the console, you should see the tool calling data like the one below.

```bash
Tool calls state: {
 "call_rCzcZRjueyD8p2kzTmeZMiSK": {
   "name": "search_gmail",
   "args": "{\"query\":\"is:unread\",\"maxResults\":1,\"resource\":\"messages\"}"
 }
}
POST /api/chat 200 in 10892ms
```

#### Add Gmail Draft Tool

We will add a Gmail draft tool next. This tool will allow the assistant to draft emails on behalf of the user.

Update `src/lib/auth0-ai.ts` with the required scopes.

```js
// src/lib/auth0-ai.ts
// ...
export const withGoogleConnection = auth0AI.withTokenForConnection({
  // ...
  scopes: [
    // ... existing scopes
    "https://www.googleapis.com/auth/gmail.compose",
  ],
  // ...
});
```

Update the `src/api/chat/route.ts` file with the following code.

```js
// src/api/chat/route.ts
import { GmailCreateDraft } from "@langchain/community/tools/gmail";
// ...
export async function POST(req: NextRequest) {
  // ...
  const tools = [
    // ... existing tools
    withGoogleConnection(new GmailCreateDraft(gmailParams)),
  ];
  // ...
}
```

Now, ask the assistant to draft an email. For example, `Draft an email to John Doe about the meeting tomorrow.` You should see the response in the UI.

![Assistant 0](https://images.ctfassets.net/23aumh6u8s0i/hWz4f6iUXTacbCNoqxwLz/c16c70d786027012b4c4944639339999/assistant-0-gmail-draft.png)

If you check the console, you should see the tool calling data like the one below.

```bash
Tool calls state: {
"call_pPAk6rFYJSSyAuYkNWFf5KYX": {
  "name": "create_gmail_draft",
  "args": "{\"message\":\"Hi John,\\n\\nI hope this message finds you well. I wanted to … [Your Name]\",\"to\":[\"john.doe@example.com\"],\"subject\":\"Meeting Reminder\",\"cc\":[],\"bcc\":[]}"
}
}
POST /api/chat 200 in 7594ms
```

You can find the [full changelog of these two steps on GitHub](https://github.com/auth0-samples/auth0-assistant0/commit/020f90f9ca85824f9cf99a82986a91bf72625041).

This corresponds to the `step-4` branch in case you want to double-check your code.

```bash
git switch step-4
```

## Learn more about AI Agents and Auth for GenAI

You have successfully built an AI personal assistant that can search the web, search your emails, and draft emails. In the next chapters, we will switch to a more production-ready architecture and add more tools like User Info, Google Calendar, Google Drive, and Slack to the assistant.

This tutorial is part of a series of posts on tool-calling Agents with [Auth for GenAI](https://a0.to/ai-content). We learned how to add tools to an AI agent and how to secure them using Auth0.

Sign up for [Auth for GenAI in Developer Preview](https://a0.to/ai-content).

Before you go, we have some great news to share: we are working on more content and sample apps in collaboration with amazing GenAI frameworks like [LlamaIndex](https://www.llamaindex.ai/), [LangChain](https://www.langchain.com/), [CrewAI](https://www.crewai.com/), [Vercel AI](https://vercel.com/ai), and [GenKit](https://firebase.google.com/docs/genkit). [Auth for GenAI](https://auth0.com/blog/introducing-auth-for-genai-launching-identity-for-ai-agents/) is our new product to help you protect your user's information in GenAI-powered applications. Make sure to join the [Auth0 Lab Discord server](http://a0.to/auth0-lab-discord) to hear more and ask questions.


Build an AI Assistant with LangGraph, Vercel, and Next.js: Use Gmail as a Tool Securely

Discover how AI agents are taking center stage by seamlessly integrating with multiple digital tools like Gmail, Calendar, Slack, and Google Drive to be more efficient. Learn why it is important to secure them and how to do it.

**AI agents** or **Operators** are the latest trend in AI. At their core, agents are autonomous systems that not only process natural language using Large Language Models (LLMs) but also decide when and how to act by interfacing with external tools and APIs. These smart entities blend machine learning with decision-making capabilities, enabling them to perform complex tasks, interact in real-time, use the most efficient tools to perform certain tasks, and even learn from their environment—all without constant human intervention.

<AmpContent>
<amp-youtube
    data-videoid="r7wEinUG0ns"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div
  className='embed-container'
  style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;">
    <iframe
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
      src='https://www.youtube.com/embed/r7wEinUG0ns'
      frameborder='0' allowfullscreen>
    </iframe>
</div>
</NonAmpContent>

## Tool Calling Agents

LLMs on their own are still susceptible to hallucinations and mistakes, but the ability to call tools opens up a whole new world of possibilities where error-prone tasks can be offloaded to a more traditional non-AI tool, like using a calculator to do math rather than relying on the LLM for it. Similarly, tool calling allows AI agents to interface with other applications and services, like Gmail, Calendar, Slack, and Google Drive, to do more for you than just answering questions.

Tool calling can be generally classified into these:

1. **Unauthenticated Tools:** These are tools that don't require authentication and are generally simpler to configure, like a calculator, a weather API, or a unit converter.
2. **Authenticated Tools:** These are tools that require authentication and are generally complex to configure, such as an API provided by another internal application or services like Gmail, Calendar, Slack, and Google Drive.

In an enterprise environment, the authenticated tools can be further classified into:

1. **First-Party Tools:** These are services that are part of the same infrastructure and require authentication, like an API provided by another internal application or a microservice.
2. **Third-Party Tools:** These are external services that require more complex authentication. They could be services that are authenticated using service accounts or API keys, like a payment API, or services that need to be authenticated by the end user, such as Gmail, Calendar, Slack, and Google Drive.

Tool calling provides many key advantages to an AI agent:

- **Autonomous Decision-Making:** AI agents analyze context and determine the next best action, reducing the need for manual oversight.
- **Optimized Task Execution:** They can connect to various services and APIs, enabling them to perform specialized tasks like data retrieval, scheduling, and communication.
- **Scalability and Adaptability:** As systems evolve, agents can easily incorporate new functionalities, adapting to changes in workflow or priorities.
- **Improved User Experience:** Their ability to tackle diverse tasks leads to more personalized and efficient interactions, making technology feel both intuitive and proactive.

## Tool Calling Agent: A Conceptual Example

Imagine an AI personal assistant that consolidates your digital life by dynamically accessing multiple tools to help you stay organized and efficient. Here’s how it could work:

1. **Gmail Integration:** The assistant regularly scans your inbox to generate concise summaries. It highlights urgent emails, categorizes conversations by importance, and even suggests drafts for quick replies.
2. **Calendar Management:** By interfacing with your calendar, it can remind you of upcoming meetings, check for scheduling conflicts, and even propose the best time slots for new appointments based on your availability.
3. **Slack Notifications:** For team communications, the assistant monitors Slack channels. It identifies key messages and creates action items, ensuring you never miss an important update from your colleagues.
4. **Google Drive Access:** Whether you need immediate access to the latest project document or a file related to a current task, the assistant retrieves pertinent documents from Google Drive on demand. It can create document summaries and even create new documents based on your instructions.

With tool-calling capabilities, the possibilities are endless. In this conceptual scenario, the AI agent embodies a digital personal secretary—one that not only processes information but also proactively collates data from connected services to provide comprehensive task management. This level of integration not only enhances efficiency but also ushers in a new era of intelligent automation, where digital assistants serve as reliable, all-in-one solutions that tailor themselves to your personal and professional needs.

## Security Challenges with Tool Calling AI Agents

Building such an assistant is not that difficult. Thanks to frameworks like [LangChain](https://www.langchain.com/), [LlamaIndex](https://www.llamaindex.ai/), and [Vercel AI](https://vercel.com/ai), you can get started quickly. The difficult part is doing it securely so that you can protect the user's data and credentials.

Many current solutions involve storing credentials and secrets in the AI agent application’s environment or letting the agent impersonate the user. Storing credentials securely in the environment might work for APIs that require API keys or service accounts. However, this is not a good idea for cases where the end users need to authenticate to the service, as it can lead to security vulnerabilities and excessive scope and access for the AI agent.

<br>

<div class="alert alert-info alert-icon">
  <i class="icon-budicon-487 icon-info"></i>
  <b>To learn more about other security concerns and vulnerabilities in AI check out this blog post on <a href="https://auth0.com/blog/identity-challenges-for-ai-powered-apps/">Identity Challenges for AI-Powered Applications</a>.</b><br> 
</div>

When you build an AI agent, you need to consider all its other security implications as well. You don't want an LLM to have unlimited access to your personal data like email and documents, and more importantly, you don't want to provide your credentials to the LLM to access these tools. Let's face it, regardless of how secure the LLM is, there is always a possibility of it getting manipulated into divulging sensitive information or doing something you don't want it to do.

## Tool Calling with the Help of Auth0

This is where Auth0 comes to the rescue. As the leading identity provider (IdP) for modern applications, our upcoming product, [Auth for GenAI](https://auth0.com/blog/auth-for-genai/), provides standardized ways built on top of OAuth and OpenID Connect to call APIs of tools on behalf of the end user from your AI agent.

Auth0 brokers a secure and controlled handshake between the AI agents and the services you want the agent to interact with on your behalf – in the form of scoped access tokens. This way, the agent and LLM do not have access to the credentials and can only call the tools with the permissions you have defined in Auth0. This also means your AI agent only needs to talk to Auth0 for authentication and not the tools directly, making integrations easier.

### Call first-party APIs on users' behalf

When your AI agent, secured with Auth0, needs to call another application also secured with Auth0, you can use standard OAuth 2.0 flows, like the [Authorization Code Flow](https://auth0.com/docs/get-started/authentication-and-authorization-flow/device-authorization-flow), to get an API token from that application with user consent. In this case, Auth0 will manage the retrieval of new access tokens using cached refresh tokens when the API token expires.

### Call third-party APIs on users' behalf

When your AI agent, secured with Auth0, wants to call external services like Gmail, Calendar, Slack, and Google Drive, Auth0 can help the agent get access tokens for the external service on behalf of the end user. In this case, Auth0 brokers the API access token from the external service to the AI agent.

![Tool calling with Federated API token exchange](https://images.ctfassets.net/23aumh6u8s0i/1gY1jvDgZHSfRloc4qVumu/d44bb7102c1e858e5ac64dea324478fe/tool-calling-with-federated-api-token-exchange.jpg)

This is made possible by Federated API token exchange, which is a way to obtain an access token from an external identity provider without the need for the user to re-authenticate every time. The end user authenticates and connects the external service once, and Auth0 intermediates the authentication and authorization process and provides the API access token to the AI agent. Auth0 takes care of storing refresh tokens and getting new access tokens when the current access token expires.

## Security Best Practices for Tool Calling AI Agents

Here is a summary of security best practices to consider when building a tool-calling AI agent:

- **Least Privilege**: Grant the minimum permissions needed (e.g., read-only access).
- **Audit Logs**: Track API calls and credential usage.
- **Proxying**: Use an IdP like Auth0 as a broker between the AI agent and the tools to protect the user's credentials.
- **Encryption**: Encrypt credentials at rest and in transit (HTTPS/TLS).
- **Token Rotation**: Regularly rotate API keys and tokens.
- **Sandboxing**: Run tools in isolated environments when possible to limit damage from leaks.

## Learn More about AI Agents and Auth for GenAI

This post offers a glimpse into the transformative potential of AI agents and highlights how secure and intelligent tool calling can empower AI agents to deliver a more connected and personalized experience. Stay tuned for a series of posts on tool-calling Agents with [Auth for GenAI](https://a0.to/ai-content), where we will build the conceptual personal assistant from the previous section in Node.js and Python, showing how to integrate with different types of services securely using your favorite AI frameworks and Auth0.

Before you go, we have some great news to share: we are working on more content and sample apps in collaboration with amazing GenAI frameworks like [LlamaIndex](https://www.llamaindex.ai/), [LangChain](https://www.langchain.com/), [CrewAI](https://www.crewai.com/), [Vercel AI](https://vercel.com/ai), and [GenKit](https://firebase.google.com/docs/genkit). [Auth for GenAI](https://auth0.com/blog/auth-for-genai/) is our upcoming product to help you protect your user's information in GenAI-powered applications. Make sure to join the [Auth0 Lab Discord server](http://a0.to/auth0-lab-discord) to hear more and ask questions.

Tool Calling in AI Agents: Empowering Intelligent Automation Securely

37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Learn how to prevent CSRF attacks from compromising your users when implementing Google OAuth for user registration and user login.

Growing an active user base is a top priority for all developers. Your product pages need copy, design, and engineering that can efficiently and effectively convert visitors into users. A visitor is an anonymous person browsing your site or app. A user is a visitor who exchanges some information to access more layers or features of your app. Even with just an email address or username, you can build a profile or identity for a user.

As such, user authentication is the backbone of conversion. User registration and login must be secure and as frictionless as possible. Long and tedious forms or requirements during registration can turn prospects away. Errors or downtime during login can frustrate even your most loyal customers, leading to dissatisfaction or support tickets.

## Why Use Google OAuth for User Authentication

A reliable way to implement user registration and authentication in an application and turn visitors into users quickly and securely is by using a registration and authentication system that your visitors already use and trust, such as Google.

As a developer, you can take advantage of Google's high security and trust Google as a source to safeguard user credentials so that you don't have to. Google social login leverages the OAuth 2.0 protocol for authorization and uses [OpenID Connect (OIDC)](https://developers.google.com/identity/openid-connect/openid-connect) as the standard for user authentication. You can delegate to Google's UI/UX and engineering the burden of password requirements, password protection, password error handling, email verification, profile data collection, and more. 

How easy or difficult is it to implement Google Login on your own? It depends. On the surface, it may be like a simple endeavor: In the JavaScript ecosystem, use a library like [`google-auth-library`](https://www.npmjs.com/package/google-auth-library), write a few lines of code, and call it a day.

While `google-auth-library` is a robust client library for using OAuth 2.0 authorization and authentication with Google APIs, it's essential to know how to use it effectively to avoid introducing security vulnerabilities in your application that could put your end-users and your organization at risk.

For instance, a recent [post on X](https://x.com/forgebitz/status/1858616526540042521) went viral: a developer named Klaas shared with the X developer community a code snippet on how to implement "google login with just the google-auth-library, no frameworks in 50 lines of code":

```typescript
export const googleLoginAction = {
  getAuthUrl: () => {
    const query = {
      client_id: oauth_google.client_id,
      redirect_uri: oauth_google.redirect_uri,
      response_type: "code",
      scope: oauth_google.scopes,
    };

    const url = new URL(oauth_google.endpoint);
    url.search = new URLSearchParams(query).toString();
    return url.toString();
  },
  verifyGoogleCode: async ({ code }: { code: string }) => {
    log.info({ code }, "verifying google auth code");

    try {
      const tokenResponse = await fetch("https://oauth2.googleapis.com/token", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams({
          client_id: oauth_google.client_id,
          client_secret: oauth_google.client_secret,
          code,
          grant_type: "authorization_code",
          redirect_uri: oauth_google.redirect_uri,
        }),
      });

      const tokenData = (await tokenResponse.json()) as { id_token: string };

      const ticket = await client.verifyToken({
        idToken: tokenData.id_token,
        audience: oauth_google.client_id,
      });

      const userData = ticket.getPayload();
      log.info({ userData }, "google auth successful");
    } catch (error) {
      log.error({ error }, "failed to verify google auth code");
      throw new Error("Failed to verify Google authentication");
    }
  },
};
```

Klaas' X post ignited a passionate discussion around user authentication and general security. As of the time of writing, the post had gathered 449k impressions, 4.7k likes, 387 reposts, and 83 comments.

## Google OAuth Implementation Can Go Wrong

Some of the commenters asked questions about the code's security posture, while others offered insights and advice on how to improve the security of that Google OAuth implementation.

Some commenters assumed the code was running on the client and were alarmed by the code handling a client secret, which could lead to a security compromise. Klaas clarified that the code is intended to run in the backend and [further explained its purpose as follows](https://x.com/forgebitz/status/1858776267266441324):

 "_this [code] has two simple functions, create a URL where you redirect the user to and a verify code function, you have the create a /callback (on the server) to get that URL. You still need to make authentication/authorization_"

Some other commenters pointed out that the code could be subject to a [Cross-Site Request Forgery (CSRF) attack](https://en.wikipedia.org/wiki/Cross-site_request_forgery), which confused others: How can there be a CSRF attack if there's no cookie involved or when the code does not run in the client?

First and foremost, let's recap what a Cross-Site Request Forgery (CSRF) attack is. [Andrea Chiarelli](https://auth0.com/blog/authors/andrea-chiarelli), Principal Developer Advocate at Okta, [summarizes a CSRF attack as follows](https://auth0.com/blog/cross-site-request-forgery-csrf/#--What-is-CSRF--):

- A typical Cross-Site Request Forgery (CSRF or XSRF) attack aims to perform an operation in a web application on behalf of a user without their explicit consent.
- The attacker leads the user to perform an action, like clicking a link.
- This action sends an HTTP request to a website on behalf of the user.
- If the user has an active authenticated session on the trusted website, the request is processed as a legitimate request sent by the user.

Andrea warns us that "even though CSRF attacks are commonly associated with session cookies, be aware that [Basic Authentication sessions](https://en.wikipedia.org/wiki/Basic_access_authentication) are also vulnerable to CSRF attacks" and that, in fact, "a CSRF vulnerability relies on the authenticated session management".

[Sandrino Di Mattia](https://x.com/sandrinodm) is a Senior Director on the Product Architecture team at Okta with robust and deep experience in cloud, identity, and security. In the thread, Sandrino commented that the code doesn’t seem to perform any state validation, making it open to CSRF attacks.

You may be wondering like others did: ["CSRF attack without any cookies, must be a new thing"](https://x.com/__morse/status/1858951728852295909). Let's explore how improperly implemented OAuth can lead to a CSRF attack.

## Cross-Site Reference Forgery (CSRF) Are Not About Cookies

Sandrino shares that CSRF is not related to cookies. Missing state validation is the most basic vulnerability in OAuth flows. [OAuth 2.0 specification recommends a `state` parameter](https://datatracker.ietf.org/doc/html/rfc6749#section-4.1.1) that allows you to verify the authenticated state of your browser. The `state` parameter preserves the browser's authenticated state set by the client in an authorization request, and the authorization server makes it available to the client in the response.

[The `state` parameter helps you mitigate CSRF attacks](https://datatracker.ietf.org/doc/html/rfc6749#section-10.12) by using a unique and non-guessable value associated with each authentication request about to be initiated. That value allows you to prevent the attack by confirming that the value from the response matches the one you sent.

**But how does a CSRF attack work without cookies?**

Sandrino explains that an attacker can go through the OAuth flow but stop right when the redirect with the authorization code to the callback URL happens. Now, the attacker can send the link to the callback URL, including the code, to the victim, which consumes the code on their machine.

Depending on the implementation of your application, a few security, privacy, and data exploits could happen. For example, the attacker's account is now forced on the victim’s browser. The victim now could be uploading docs or filling in and sending personal data to the attacker's account, thinking it’s the victim's account. Or a worse scenario: the victim is already signed in, and now this new identity (the attacker's identity) is automatically linked to the victim's existing account.

## Prevent CSRF Attacks in Google OAuth

Sandrino advises us that preventing this type of attack takes a few lines of code. In practice, on redirect, you store a random value in a cookie. You then send that value to Google using the `state` param. On callback, you validate the incoming `state` parameter with the value in the cookie. If the `state` value in the response does not match the `state` value in the cookie, you reject the login operation and stop further access. The `state` parameter and PKCE can help prevent this type of attack.

> For a deep dive on this topic, you can consult the ["More Guidelines Than Rules: CSRF Vulnerabilities from Noncompliant OAuth 2.0 Implementations"](https://www.cise.ufl.edu/~butler/pubs/dimva15.pdf) paper from the Georgia Institute of Technology and the University of Florida. Check out section 3.3 on page 8.

There's a saying that goes: "You don't know what you don't know". But then, how can you know? By doing precisely what Klaas did: share code with others and be open to feedback and constructive criticism. At the same time, you can leverage the knowledge and expertise of others who have been through similar and more complex situations, which can help you avoid falling into traps or dangerous holes.

You may be thinking, "I can rely on AI for that!" You can use AI tools to learn and understand, but remember that those tools are imperfect, as they are an aggregation of human knowledge and can also make mistakes. There are instances where an AI tool can present you with "security" code with high confidence. Still, that code could be anything but secure, missing the implementation of security best practices or defensive mechanisms.

## Use Libraries to Implement Google OAuth 

It's important to highlight that if you want to implement a standard protocol yourself, you need to understand its specifications well, be aware of its nuances, and follow its details diligently. Instruments like the `state` parameter and all other security measures included in specifications and standards are the result of discussions and experience of industry experts throughout the years.

As developers, we often fall into the dilemma of reinventing the wheel (do it yourself) or relying on those who have already done it in the best way (use a library).

Sandrino suggested in the thread that it's better to use a library like Passport.js over the code shared on the tweet&mdash;or rather, X post. Passport.js implements OAuth 2.0 the way that the standard defines it. You can inspect the implementation of Google OAuth in Passport.js by looking at the [`lib/strategy.js`](https://github.com/jaredhanson/passport-google-oauth2/blob/master/lib/strategy.js) file of the [`passport-google-oauth20`](https://github.com/jaredhanson/passport-google-oauth2/tree/master) npm package.

The `OAuth2Strategy` from Passport is well-documented. The comments in the code can quickly guide you on what's happening through that flow:

- The Google authentication strategy authenticates requests by delegating to Google using the OAuth 2.0 protocol.
Applications must supply a `verify` callback function that accepts an `accessToken`, `refreshToken`, and service-specific `profile` and then calls another `cb` callback function, supplying a `user`. The `user` value should be set to `false` if the credentials are invalid. If an exception occurs, `err` should be set.

Let's see an example of how you'd use Google OAuth login with Passport.js:

```javascript
passport.use(new GoogleStrategy({
    clientID: '123-456-789',
       clientSecret: 'shhh-its-a-secret'
       callbackURL: 'https://www.example.net/auth/google/callback'
     },
     function(accessToken, refreshToken, profile, cb) {
       User.findOrCreate(..., function (err, user) {
         cb(err, user);
       });
     }
));
```

As you inspect the implementation code, you'll notice that Passport.js does much more than handle the login. [OAuth 2.0 provides consented access and restricts actions](https://auth0.com/intro-to-iam/what-is-oauth-2) of what a client app can perform on resources on behalf of the user without users ever sharing their credentials with the application. Using Google OAuth 2.0, you can also request access to user contacts and other resources on the Google platform. As the needs of your application scale, you may see yourself needing a more complex data access policy that calls for more code to write and maintain and more scenarios and edge cases to be aware of.

## Google OAuth Attacks Go Beyond CSRF Attacks

Security is an ever-evolving landscape. It's critical for you to stay on the vanguard regarding security in the industry, especially with the rise of artificial intelligence (AI). Implementing authentication on your own is an investment in money, risk, and time. Relying on robust, time-tested libraries or identity service providers can minimize some of those costs.

As mentioned in the post, implementing social login with Google OAuth for your app is just one piece of the authentication puzzle. Once you have users, you are responsible for protecting the data they entrust you. For example, depending on the region where you operate, you may be subject to regulations around user management and privacy, such as GDPR, which also extends to logs, not just the user data you have in your databases.

As you scale and grow in popularity, you may also gain unwanted attention from bad actors and attackers who may want what you are securing: rich user data. But, even on a small scale, you may become the target of bad actors looking to test their skills to break into apps.

> Recommended read: [The biggest underestimated security threat of today](https://techcrunch.com/2024/11/01/the-biggest-underestimated-security-threat-of-today-advanced-persistent-teenagers/)

In the X thread we have been discussing, Jared Hanson, the creator of Passport.js and a Principal Product Architect at Okta, validated that "checking a nonce or state is highly recommended." Jared added, "It’s less simple, but it protects against common attacks."

[Aaron Parecki](https://aaronparecki.com/), Director of Identity Standards at Okta, reminded me that it's not just CSRF attacks that are the concern when it comes to OAuth 2.0 flows. Even if you fix the CSRF attacks we have described, you could still be open to an OAuth 2.0 authorization code injection attack, which you can prevent with PKCE. You can learn more about that type of attack by watching the video below: 

<AmpContent>
<amp-youtube
    data-videoid="1ot45WwQWJE"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>
<NonAmpContent>
<div className='embed-container' style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://www.youtube.com/embed/1ot45WwQWJE' frameborder='0' allowfullscreen></iframe></div>
</NonAmpContent>

Aaron also hosted an "OAuth Happy Hour", which includes [a demo of the authorization code injection attack](https://www.youtube.com/watch?v=moQidjdV5cw). Be sure to check it out!

Let us know if you'd like a detailed follow-up blog post covering the OAuth 2.0 authorization code injection attack.

## Aside: Use Auth0 to Implement Google Social Login

Auth0 makes it even easier to get started with Google. Every new tenant has the Google social connection enabled by default. You don't even have to set up a Google Cloud project to see Google social login in action. Auth0 maintains a set of developer keys you can use to start testing Google social login in your applications in development. Follow the ["Google Social Connection to Login"](https://developer.auth0.com/resources/labs/authentication/google-social-connection-to-login#introduction) lab to learn how to use those Google dev keys and set up ones for production.


Prevent CSRF Attacks in OAuth 2.0 Implementations

jimena-garbarino

Jimena is an experienced result and value-oriented programmer with a strong engineering background. She excels with Ruby on Rails, Java, and Scrum development. She has worked in web development for 10+ years in many industries and has a master's degree in software engineering from Universidad de Buenos Aires.

Spring Cloud Developer

Jimena Garbarino

Deploy a cloud-native Java Spring Boot microservice stack secured with Auth0 on Google GKE using Terraform and Kubernetes.

Deploy Secure Spring Boot Microservices on Google GKE Using Terraform and Kubernetes

A walk-through of building a microservices architecture with JHipster, Keycloak, Auth0, and Google Kubernetes Engine (GKE) deployment.

Identity in Spring Boot with Kubernetes, Keycloak, and Auth0

joyce-echessa

Guest Author

Joyce Echessa

Learn about the different APIs available in Google's ML Kit (mobile machine learning SDK). You will also learn how to create an application that uses one of its APIs.

A Look at Android ML Kit - the Machine Learning SDK

Vittorio

Vittorio Bertocci is a Principal Architect for Auth0. Before Auth0, he had a lengthy career with Microsoft, where Vittorio worked with Fortune 100 and Global 100 companies, including working on Microsoft’s Azure Active Directory team as principal program manager focusing on the developer experience. He contributed to the inception and launch of Microsoft's claims-based platform components (Windows Identity Foundation and ADFS, ADAL and MSAL SDKs, ASP.NET middleware). Vittorio is a well known speaker, educator and published author.

Principal Architect

Vittorio Bertocci

Identity protocols for internet browsers with Sam Goto (Google Chrome) and George Fletcher (Verizon)

## The Overview

In this episode of _Identity, Unlocked_, principal architect at Auth0 and podcast host Vittorio Bertocci speaks with Sam Goto, software engineer working on Google Chrome, and George Fletcher, Identity Standards architect at Verizon, on the ever-changing world of identity protocols for internet browsers.

Sam focuses on working with browsers to create better functionality in their foundation protocol by determining the good and bad uses of low-level primitives, such as third-party cookies, iFrames, and pop-ups. In particular, Sam highlights how such primitives are being used by trackers and ad services to track users, often without their knowledge or consent- and how that is prompting browser vendors to put new limits to prevent abuses. There is a precedent for this: Sam gives the example of how over time, web apps increasingly abused low-level primitives such as pop-ups- and how browsers eventually put restrictions on them to give a better user experience. Browser vendors are now attempting to do the same to prevent unwanted tracking; however, those interventions are disrupting legitimate scenarios too- identity protocols being one of the most important ones, and the very reason we are having this conversation on Identity, Unlocked. Sam then talks about how browsers are looking to fix these problems by building higher level primitives to replace the low-level ones, but that even these high-level primitives face challenges.

George explains the many problems the modifications to browsers can cause for Identity and OpenID Connect. George also goes into detail about the protocols being implemented between browsers, relying on parties and IdPs for what happens if an IdP goes down, as well as the RP classification and decentralized identity.

Vittorio, Sam, and George go in depth on the state of browser changes and identity protocol today and what’s in store for their futures.

## Key Takeaways

Distinguishing between good and bad motives of low level primitives:
<iframe width="100%" height="230px" scrolling="no" style="border: none" src="https://identityunlocked.auth0.com/player/da8f4e71"></iframe>

What’s happening to identity protocols as browser authentication changes:
<iframe width="100%" height="230px" scrolling="no" style="border: none" src="https://identityunlocked.auth0.com/player/7a5f49ee"></iframe>

Sam talks about the potential for other browsers to integrate Web ID and the new challenges that would come about:
<iframe width="100%" height="230px" scrolling="no" style="border: none" src="https://identityunlocked.auth0.com/player/38619c76"></iframe>

George points out key problems to solving the RP classification problem:
<iframe width="100%" height="230px" scrolling="no" style="border: none" src="https://identityunlocked.auth0.com/player/3445437a"></iframe>

George’s Call to Action:
<iframe width="100%" height="230px" scrolling="no" style="border: none" src="https://identityunlocked.auth0.com/player/6baaec0f"></iframe>

Sam’s Call to Action:
<iframe width="100%" height="230px" scrolling="no" style="border: none" src="https://identityunlocked.auth0.com/player/4a98766b"></iframe>


### Links/Resources:

- Connect with Sam Goto on [LinkedIn](https://www.linkedin.com/in/samuelgoto/)
- Connect with Sam Goto on [Twitter](https://twitter.com/samuelgoto)
- Connect with George Fletcher on [LinkedIn](https://www.linkedin.com/in/gffletch/)
- Connect with George Fletcher on [Twitter](https://twitter.com/gffletch)

<br>

- Connect with Vittorio Bertocci on [LinkedIn](https://www.linkedin.com/in/vittoriobertocci/)
- Connect with Vittorio Bertocci on [Twitter](http://www.twitter.com/vibronet)

<br>

- Learn more about [Identity, Unlocked](https://identityunlocked.auth0.com/public/49/Identity%2C-Unlocked.--bed7fada/episodes)
- Learn more about [Auth0](https://auth0.com/)
- Learn more about the sponsor for this season, the [OpenID Foundation](https://openid.net/foundation/)

<include src="asides/IdentityUnlocked" />

<include src="asides/AboutAuth0" />

Identity, Unlocked... Explained: Season 2 Ep 7

fikayo-adepoju

Fikayo Adepoju is a Full-stack developer, technical writer and tech content creator proficient in Web and Mobile technologies and DevOps with over 10 years experience developing scalable distributed applications. With over 40 articles written for CircleCI, Twilio, Auth0 and The New Stack blogs and also on his personal Medium page, he loves to share his knowledge to as many developers as would benefit from it. You can also check out his video courses on <a href="https://www.udemy.com/user/fikayo-adepoju/">Udemy</a>.

Full-Stack Developer

Fikayo Adepoju

Using Google Vision API, build a game where the user scans an image to match an emoji displayed.

Creating an Emoji Game with Vue, Auth0, and Google Vision API

df6c864847fba9687d962cb80b482764?size=200 avatar

df6c864847fba9687d962cb80b482764?size=200

Martin Gontovnikas, a.k.a Gonto, is a software engineer at heart who moved to the ‘dark side’ and became VP of Marketing at Auth0. He considers himself lucky to have found a way to combine his two passions and apply his engineering thinking model to marketing.<br/><br/> Gonto’s analytical thinking is a huge driver of his data-driven approach to marketing strategy and experimental design. He is based in the Bay area, and in his spare time, can be found eating gourmet food at the best new restaurants, visiting every local brewery he can find, or traveling the globe in search of new experiences.

Former SVP of Marketing and Growth at Auth0

Martin Gontovnikas

A new password manager and improved UX lead to quick, safer search.



With updates every six weeks, Google is constantly improving their Chrome browser. But for its ten-year anniversary, Google wanted to give their users a special reason to celebrate. And they delivered with their most recent Chrome update. 

![New UI and features of Google Chrome browser](https://images.ctfassets.net/23aumh6u8s0i/vDmVepxBP7oYXs1FyrsvS/67526580ff6011181a887216df198fbe/google-chrome-a-new-look)

Perhaps you've already peeked at the changes (it launched in early September). But with all of the new details it packs in, even the most up-to-date teams might not have dug in far enough. While some of the updates are undetectable, there are a few more prominent ones that teams using Chrome should understand and employ.

This is a first indication of what is to come in search updates from the giants over at Google. For teams looking to increase productivity — and especially security — we've saved you the trouble of sifting through the details on your own.

<include src="TweetQuote" quoteText="Google is releasing a new Chrome that will improve employee security and productivity."/>

## Chrome's New Password Manager Reduces Chances of Hacking

With a freshly re-imagined password manager, this Chrome update has made it easier for employees to avoid password recycling and improve password storage. This is more important than you might think. According to a recent study, poor passwords are responsible for [81 percent of data breaches](https://www.myndnow.com/news/bismarck-news/poor-passwords-responsible-for-81-of-company-data-breaches/1344822736). Over 70 percent of employees reuse the same password on multiple sites at work — and many of these recycled passwords are easy to hack in the first place. 

Some easily-detectable employee password examples include:

* 123456
* qwerty
* password
* abc123

(The above data is from [Troy Hunt's sample](https://www.troyhunt.com/86-of-passwords-are-terrible-and-other-statistics/) of more than half a billion passwords that were previously implicated in data breaches.)

The [2012 Dropbox data breach](https://techcrunch.com/2016/08/30/dropbox-employees-password-reuse-led-to-theft-of-60m-user-credentials/), which took the company four years to discover, resulted in the theft of 60 million user credentials due to one employee reusing a password.

Convinced that well-crafted passwords are important? Google agrees.

It has evolved its password-saving function (for easier log-ins and payments) to include a unique password generator along with speedy, more accurate form filling. This is designed to help teams use more diverse and complex passwords.

![Google Chrome's built-in recommended password generator example](https://images.ctfassets.net/23aumh6u8s0i/2XBCoxAqohI63tutNIOafV/15c757387aea7a476090158bb2829143/chrome-built-in-password-generator)

On sites that require passwords, Chrome will suggest hard-to-hack options. One of the most substantial of Chrome's updates, the password manager will save newly created passwords directly to your Google account. Employees can manage them within their accounts or directly in the Chrome toolbar. 

Though password security is crucial, this improvement may seem subtle compared to some of the more eye-popping features in this Chrome update. Let's move onto the new Chrome UI, design, and productivity features.

<include src="TweetQuote" quoteText="The new Chrome now includes a built-in password generator."/>

## A Reimagined Browser Makes Search Faster and Organization Easier

It's clear that Google is focused on making its users more productive. Over and above the rapid generation and storage of passwords, it delivers a valuable interface and design for everyday browsing.

A rounded tab scheme, as opposed to the straight edges in the former version, creates more space to manage web pages and documents across your open tabs. 

![Google Chrome's new UI and rounded design](https://images.ctfassets.net/23aumh6u8s0i/7zhFexF0zeF2HA8mzd6qgT/d89ca63d2a3971466a1aa24358c836e9/chrome-makes-search-faster)

The [improved UX](https://blog.nomnominsights.com/ux-uncensored-what-ux-and-product-people-say-when-nobodys-looking/) allows more space for website icons - the key to differentiating tabs on your browser. Even with fifty tabs open on one window, all fifty icons would be in view. 

You can also search for a specific page in Google's Omnibox - the main hybrid address and search bar. The Omnibox will now tell you if that page is already open, and a click of the new ‘Switch to this tab' option will take you directly there.

Google has already promised an even smarter Omnibox that can search your files from your Google Drive directly. As Chrome evolves, getting yourself to the right page will only continue to get faster and easier.

Employees in the U.S. spend an average of [eight hours a day working](https://www.bls.gov/charts/american-time-use/emp-by-ftpt-job-edu-h.htm) (and this is well below the averages of many high-performance roles in industries like finance and law). [Increasing employee productivity](http://blog.idonethis.com/productivity-software/) is critical to keeping teams on track and competitive, even if that means shaving off seconds with improved browser organization and search functions. These will add up over time, freeing up team members to dig into the most valuable tasks.

### It's not all about desktop: Chrome includes mobile browsing updates

Mobile search has also drastically improved, thanks to Google's careful consideration of one-handed, on-the-go features. 

![Chrome mobile browser updates](https://images.ctfassets.net/23aumh6u8s0i/4rg6oIKMw8sGkldmrucn2k/50bbd13bf308a0a0097c4021c4d3adc1/new-chrome-on-mobile-as-well)

Searching with one hand becomes exceedingly more convenient when you don't have to reach the top of the screen. The keyboard appears simply by clicking the new search button at thumb's length.

Google also makes it easier to jump between tabs on your phone by keeping the tab count next to the bottom search button. 

Click through to open tabs and you'll see the same rounded redesign from the desktop version on both iOS and Android. With a full view of each open page, the new look helps make your mobile tabs even more intuitive than on your desktop. Plus, this look matches up with the new Google Drive on your desktop, giving an even more cohesive feel to the whole Google family. 

In 2017, [49.7 percent](https://www.statista.com/topics/779/mobile-internet/) of web page views worldwide were on mobile devices — and mobile data traffic is projected to increase 7X by 2021. As more employees work remotely, travel, and rely on mobile devices, these small tweaks that Chrome has rolled out for iOS will make a difference.

## The Future of Search: What's Ahead For Teams That Use Chrome

Today, Chrome is the most heavily used browser, with over 60 percent of users relying on it.

![Statistics - Chrome is the most widely used browser in the world](https://images.ctfassets.net/23aumh6u8s0i/6Dw9jygFbyGYswOASX3Gks/f67b16dd6b64ad92d5949e57e9fc4644/browsers-usage-comparison)

The changes that Google makes will have far-reaching consequences for employee security and agility at work, helping everyone brace themselves in an [increasingly complex threat environment](https://auth0.com/blog/3-critical-lessons-from-the-t-mobile-data-breach/). 

While this Chrome update has provided the internet with a new look, tighter security, and more productive tabs, the real excitement comes in a reimagined future for upcoming Chrome models. 

With rumors of a [_URL-less browser_](https://www.digitaltrends.com/web/google-wants-to-kill-urls-to-make-the-internet-safer/) for safer browsing and further implementation of artificial intelligence, there's a lot in store that's bound to make life increasingly more efficient. 

Google has also indicated more "under the hood" security updates in 2018, including an improved ad filter to [_site isolation_](https://security.googleblog.com/2018/07/mitigating-spectre-with-site-isolation.html).

Lastly, Google also gave us a first glimpse into smart search bar answers—a convenient way to get answers to straightforward questions. For example, when you search for the weather, Chrome will give you the answer directly into the search bar - rather than taking you to a search engine page first.

![Chrome Omnibox search features include giving you answers directly in the search bar](https://images.ctfassets.net/23aumh6u8s0i/4vMgV5Hlxjsl3Poo171YNz/acbca889e63916c5ef09fcab2ccf245c/new-features-on-google-chrome)

With a deliberate focus on simple questions, this feature is designed for the moments when all you need is a quick explanation or an immediate reminder on a piece of trivia or even a language translation. 

As the Omnibox becomes increasingly smarter, the future of search is rapidly unfurling before our eyes. Google intends to continually improve how users find information—and keep it safe—in 2018 and beyond.

<include src="TweetQuote" quoteText="Chrome, the most popular browser in the world has a new version with a lot of great features.."/>

<include src="asides/AboutAuth0" />


New Chrome Improves Employee Security and Productivity

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Check out our summary of the Google I/O Conference 2018, Day 3.



The final day of Google I/O 18 consisted of a few talks including Node.js, Serverless deployment, Tensorflow, Android Security, etc.

Let's get started.

## Deploying Serverless Node.js microservices

[Myles Borins](https://twitter.com/MylesBorins) and [Steren Giannini](https://twitter.com/steren) gave a talk on _Deploying Serverless Node.js microservices_.

They announced that in a couple of weeks, Node.js will start running on Google AppEngine. Developers would be able to deploy a Node.js app easily to Google Cloud.

The Node.js app would simply have an _app.yaml_ file that specifies the runtime. And then the developer can run `gcloud app deploy`. That's it!

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">In a few weeks, Node.js will now run on AppEngine Standard. 👌<br><br>All it will take to have your node apps be deployed on AppEngine Standard <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> 🔥 <a href="https://t.co/oNPEvIZjEF">pic.twitter.com/oNPEvIZjEF</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/994709191905308679?ref_src=twsrc%5Etfw">May 10, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Node.js deployment process on AppEngine <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/TyCSbUFpLT">pic.twitter.com/TyCSbUFpLT</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/994710527518502913?ref_src=twsrc%5Etfw">May 10, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## TensorFlow without a PhD

This talk gave techniques about deep reinforcement learning with TensorFlow. There was a demo of a pong game driven by Neural network. There was also a demo of an animation character that learned how to move and jump via machine learning exposed by TensorFlow.

Check out the demo below:

<blockquote class="twitter-tweet" data-lang="en"><p lang="fr" dir="ltr">TensorFlow. Artificial Intelligence <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/uCVC9IdshI">pic.twitter.com/uCVC9IdshI</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/994654638816223232?ref_src=twsrc%5Etfw">May 10, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

The tools for the demo include:

* TensorFlow for the models
* Google ML engine for the training
* Tensorboard Visualization Kit

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">TensorFlow without a PhD. <br><br>Get the keys to the machine learning kingdom today 🔥 <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <br><br>1. TensorFlow for the models <br>2. ML engine for the training<br>3. Tensorboard for the Visualization <a href="https://t.co/m0Q9KU3bFA">pic.twitter.com/m0Q9KU3bFA</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/994656270601760768?ref_src=twsrc%5Etfw">May 10, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Search Friendly JavaScript-powered Websites

Several tips for building search-friendly JavaScript-powered websites were given in this talk.

* Add a robot.txt to the top level domain of your site which specifies the URLs to crawl and not to.
* Use good URLs such as `example.com/about` rather than fragmented URLs such as `example.com/#home`.
* Use consistent URLs for the same page.
* Add the critical metadata such as canonical links, viewport, title and description of each page, etc.
* Use href elements when linking between pages. Don't use non-semantic elements such as `<div onclick=goTo('/contact')></div>` if you don't have to!

Tools such as [Puppeteer](https://developers.google.com/web/tools/puppeteer) and [Rendertron](https://github.com/GoogleChrome/rendertron) were recommnended for dynamic rendering.

> **Note:** The rendering of JavaScript-powered websites in Google search is deferred until Googlebot has resources available to process that content.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">🌟 Tips for SEO<br><br>1. Use meaningful URLs<br><br>E.g. <br>✅ <a href="https://t.co/jTx8E7mblc">https://t.co/jTx8E7mblc</a> <br>❌ <a href="https://t.co/Qo9zfpbcLH">https://t.co/Qo9zfpbcLH</a> <a href="https://t.co/NUZ1V33d3d">pic.twitter.com/NUZ1V33d3d</a></p>&mdash; Ire Aderinokun (@ireaderinokun) <a href="https://twitter.com/ireaderinokun/status/994664766571405312?ref_src=twsrc%5Etfw">May 10, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Watch all the talks from Day 1 at the [Google Developers Youtube Channel](https://www.youtube.com/user/GoogleDevelopers).

<include src="asides/AboutAuth0" />


## Conclusion

It's been an amazing three days of awesomeness. A lot of talks and announcements. A lot of new kits for developers to build amazing products with. I'm stoked for all the great things that will be rolled out in the coming months. The future is A.I!

<include src="TweetQuote" quoteText="The future is A.I!"/>

Google I/O 2018 Summary - Day 3

Check out our summary of the Google I/O Conference 2018, Day 2.



The second day of the Google I/O 18 consisted of several talks including Web Assembly, Polymer, Chrome Dev Tools, Flutter and Artificial Intelligence.

Let's dive in to know what's new and the improvements that have been made to the web!

## What's new in Chrome DevTools

There is a new shortcut, Ctrl + F, that will pull up a new search sidebar in the Network pane of Chrome DevTools. With this search sidebar, you can search through headers and their values.

![Network Search](https://images.ctfassets.net/23aumh6u8s0i/1VOWD9cirzXmdCSM2l9top/ae746fd0ad397c3ebf7215497adb964f/network-search)

![Regex](https://images.ctfassets.net/23aumh6u8s0i/5c0P5eoibLJRO65UzqWE9T/41eec340eb3ad20bce70a5e47552ce80/regex)

The Performance panel has been improved to provide flame charts for every process. The charts show the total work each process does. You need to make sure **Site Isolation** for Chrome is enabled by heading to `chrome://flags#enable-site-per-process` and activating it.

![Performance Isolation](https://images.ctfassets.net/23aumh6u8s0i/1j4heZ9lidrx6RlTdrGKAX/cc7222c28f3dde544073d8417a91fd68/perf-isolation)
_Performance Isolation_

The Security panel now provides the ability to show the certificate transparency information of a secure website.

![Certificate Transparency](https://images.ctfassets.net/23aumh6u8s0i/7keXfaTVTb6etZsbgWLbfL/ed8b810f71b19e9634674d421a8cf69b/certificate-transparency)
_Certificate Transparency_

The Sources Panel has a _Network tab_. The Network tab is now called the Page tab.

![Sources Panel](https://images.ctfassets.net/23aumh6u8s0i/4nNsIhZXFSE4HbLsbZxxLj/3a6c5462ab79e829f6ff3a1be4409d1c/page)
_Sources Panel_

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">In Chrome DevTools you can inspect colours, see their contrast ratio, and visiblly see what colours would meet the WCAG thresholds! <a href="https://twitter.com/hashtag/IO18?src=hash&amp;ref_src=twsrc%5Etfw">#IO18</a> <a href="https://t.co/meTJbXJdI6">pic.twitter.com/meTJbXJdI6</a></p>&mdash; Ire Aderinokun (@ireaderinokun) <a href="https://twitter.com/ireaderinokun/status/994285517784076288?ref_src=twsrc%5Etfw">May 9, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Do It Yourself Artificial Intelligence

Google introduced the **AIY Kits:** a series of open source projects that include hardware and software tools, showcasing on-device artificial intelligence.

With AIY Kits, users can use artificial intelligence to make human-to-machine interaction more like human-to-human interactions.

<include src="TweetQuote" quoteText="With AIY Kits, users can use artificial intelligence to make human-to-machine interaction more like human-to-human interactions."/>

The first open source project is the Voice Kit. The speech recognition ability in this kit allows you to add voice recognition to assistive robots, talk to control devices such as light bulbs and replace physical buttons on household appliances and consumer electronics.

![Introducing Voice Kit](https://images.ctfassets.net/23aumh6u8s0i/2SEjJ6SWtCXSZCCoZRUJXi/05689ee7134ef43c5a23698cbe555c57/introvoicekit)

![Voice Kit](https://images.ctfassets.net/23aumh6u8s0i/5Nf44KM9WMutWhNCHFxmWo/a6d347b7e1aea3c42752b47b5bcfc3a4/voicekit)

## Web Performance

Google analyzes a lot of sites and has learned over time how to make them extremely fast. The **Web Performance made easy** talk by Eva and Addy Osmani showed how to fix common web performance bottlenecks and take advantage of the latest browser APIs to improve loading experience.

* **New Lighthouse Web Performance Audits**
* Optimizing Caching Strategies - Cache as many resources as possible efficiently.
* Remove unnecessary bytes and don't send things twice - Optimize Caching strategies. Cache as many resources as possible.
* Remove unused JavaScript and CSS from the Critical Path.
* Eliminate unnecessary downloads.
* Don't serve unoptimized or unnecessary images to your users.
* Help browsers deliver critical resources.
* Have a Web Font Loading Strategy.

Google announced a new experimental browser feature called `Priority Hints`. It allows you to specify the importance of a resource like so:

```
<img src="kit.png" importance="high" />
```

```
<link rel="preload" as="style" href="theme.css" importance="low">
```

The browser loads the resources with high importance first before the others.

![Dont send twice](https://images.ctfassets.net/23aumh6u8s0i/5HKKPPeaoo5PAhW3dG1gx1/df23889e9d8a428accbe2d3f1656ea52/dontsendtwice)
![Remove Unused JavaScript](https://images.ctfassets.net/23aumh6u8s0i/7ofCAI5E91SwJH0Op1Bvli/aeb70a894fb4b98807f1f0396c9f1100/removeunusedjs)
![Eliminate unnecessary downloads](https://images.ctfassets.net/23aumh6u8s0i/4R5Zwz6IYRC4slZXq9IAf1/b7ecddad95c75badad34b9f577d82373/eliminateunecessarydownloads)
![Unoptimized images](https://images.ctfassets.net/23aumh6u8s0i/3gBa0sK46OHQj9jrqkLTRx/de54107094c77709ed548257f5909f4a/unoptimized)
![Web Font Loading strategy](https://images.ctfassets.net/23aumh6u8s0i/1fVHCmCGoWGCAy39BROJrq/4b6f5d5efd872f2781a63dd8cb245c82/webfontloadingstrategy)

Addy Osmani announced [Guess.js](https://github.com/guess-js/guess), a toolkit for enabling data-driven user-experiences on the Web.


<include src="TweetQuote" quoteText="Addy Osmani announced Guess.js, a toolkit for enabling data-driven user-experiences on the Web"/>

It provides the following shown in the diagram below:

![Guessjs](https://images.ctfassets.net/23aumh6u8s0i/5Hq8hRGV5VaHQYidZ0wftr/76fa4dd6dd91fb1098cff1a0531cce1a/guessjs)

Read more about [Guessjs](https://blog.mgechev.com/2018/05/09/introducing-guess-js-data-driven-user-experiences-web/)

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">‘Web Performance made Easy’<br>Lighthouse Web Performance audits in chrome Dev tools are super useful. Solutions to improve the UX of your web apps <br>Day 2 <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://twitter.com/hashtag/AfricaAtIO?src=hash&amp;ref_src=twsrc%5Etfw">#AfricaAtIO</a> <a href="https://t.co/vgnHYlmMNR">pic.twitter.com/vgnHYlmMNR</a></p>&mdash; Sandra Israel-Ovirih (@SandraIsrael_O) <a href="https://twitter.com/SandraIsrael_O/status/994454557559148544?ref_src=twsrc%5Etfw">May 10, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## Web Assembly

Google is working really hard to allow developers import web assembly modules into their JavaScript apps and have Chrome render it effectively.

With Web Assembly, software like AutoCAD and Complex3 have created complex but fast UI web experiences.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Web Assembly - The Journey <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/gDeBaLSitP">pic.twitter.com/gDeBaLSitP</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/994336938957066240?ref_src=twsrc%5Etfw">May 9, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="en"><p lang="it" dir="ltr">Autocad Web Software Stack <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/i26G6bnLoF">pic.twitter.com/i26G6bnLoF</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/994336060506173440?ref_src=twsrc%5Etfw">May 9, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Figma uses C++. and WebAssembly <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/EbwAYoSGfD">pic.twitter.com/EbwAYoSGfD</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/994333999936913408?ref_src=twsrc%5Etfw">May 9, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Check out some updates from my developer friend, [Ire Aderinokun](https://twitter.com/ireaderinokun), that attended other sessions below.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">With the Accessibility Object Model we can create accessible elements from previously inaccessible elements like canvas!<br><br>You can use the AOM to create elements that don&#39;t exist in the DOM, but that can be interacted with assistive technology 🔥<a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/8gWHYh2S9x">pic.twitter.com/8gWHYh2S9x</a></p>&mdash; Ire Aderinokun (@ireaderinokun) <a href="https://twitter.com/ireaderinokun/status/994292868498972672?ref_src=twsrc%5Etfw">May 9, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The new :focus-visible pseudoclass will only apply when a user is focusing via a keyboard or other assistive tech (or if a user opts in)<br><br>This will allow us to have more visible focus styles for users that need it and less obvious ones for mouse users 👏🏾<a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/sMeRpc5oId">pic.twitter.com/sMeRpc5oId</a></p>&mdash; Ire Aderinokun (@ireaderinokun) <a href="https://twitter.com/ireaderinokun/status/994289136826703872?ref_src=twsrc%5Etfw">May 9, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The &quot;Accessibility&quot; tab in Chrome DevTools shows you any properties related to an element and how it looks in the Accessibility tree <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/TaRPjBRkhE">pic.twitter.com/TaRPjBRkhE</a></p>&mdash; Ire Aderinokun (@ireaderinokun) <a href="https://twitter.com/ireaderinokun/status/994286888868429824?ref_src=twsrc%5Etfw">May 9, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<include src="asides/AboutAuth0" />


## Conclusion

Google I/O, Day 2 was amazing. I was able to attend a few critical sessions as seen above. Looking forward to the **#Day3**.

If you were around for _#GoogleIO - Day 2_, let me know the announcements and talks that inspired you in the comment section. 😃


Google I/O 2018 Summary - Day 2

Check out our summary of the Google I/O Conference 2018, Day 1.



The first day of the Google I/O 18 consisted of a general opening keynote by Google CEO, Sundar Pichai, a developer keynote led by Jason Titus, VP, Developer Product Group, Google, the web state of the union talk, and several others. Over 5,000 developers, designers, and managers gathered at Shoreline, Amphitheatre to witness the opening day. Let's dive into the key announcements that were made!

Google has worked hard over the last few years on improving every aspect of their products with AI and Machine Learning. And this year, they made some key announcements about new products, and existing products improved with AI.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Google fixing critical bugs <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/1lKJN77BNB">pic.twitter.com/1lKJN77BNB</a></p>&mdash; Adrián Catalán @ #io18 🇺🇸 (@ykro) <a href="https://twitter.com/ykro/status/993899819549655040?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Google AI

Google announced that its research division has been rebranded to **Google AI**. This rebranding came as a result of Google's continued focus on Computer vision, Natural language processing, and neural networks.

All the research papers and publications are now on [ai.google](https://ai.google/).

## Google Assistant

The Google Assistant has been greatly improved. 6 new voices have been added including the voice of popular musician, John Legend. Furthermore, Google announced a new technology called **Duplex** that'll enable your Google Assistant to make conversations on your behalf like a lunch reservation at a restaurant, and setting up a meeting. The rollout will be very limited.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Google Assistant making bookings already for you? 😱😱😱<br><br>Ah, this is too early oh <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://twitter.com/hashtag/AI?src=hash&amp;ref_src=twsrc%5Etfw">#AI</a> <a href="https://t.co/V6CpxajNJx">pic.twitter.com/V6CpxajNJx</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/993908985517326336?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

I'm a Google Home user. And every time I need my Google Assistant to do something, I usually start every conversation with _Hey, Google!_. Now, I don't have to do that anymore because the Google Assistant now has support for continued conversations. I could just say _Hey, Google!_ once and continue asking my Google Assistant for help on any matter.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">John Legend is going to be one of the new voices for Goole Assistant! 😍<a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://twitter.com/hashtag/ShareTheJourney?src=hash&amp;ref_src=twsrc%5Etfw">#ShareTheJourney</a> <a href="https://t.co/XCEkJr9kKr">pic.twitter.com/XCEkJr9kKr</a></p>&mdash; Ire Aderinokun (@ireaderinokun) <a href="https://twitter.com/ireaderinokun/status/993904230598459394?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

The Google Assistant has a new feature called _Pretty Please_. This feature was added to help train your kids to avoid being commanding when asking for favors. With the new _Pretty Please_ feature, kids can be taught to always make polite requests. You can enable this mode on your Google Home, or Google Home Mini.

> **Note:** Duplex is an AI system for natural conversations.

## Google Photos

An AI-improved Google Photos now has features such as:

* Colorization of black and white photos
* Brightness correction
* Suggested Rotations
* Conversions of paper photos to PDFs.

## Google News

Google is keen on getting users a seamless way of catching up with news all over the world. From text to audio to video. Google is rolling out a new AI improved version of the  **[Google News](https://news.google.com)** product that provides an insane way to catch up with events around the world. This improved product replaces Google Play Newsstand on mobile and desktop, and Google News app on mobile. It will be available to everyone on Android, iOS, and the web in 127 countries by next week.

## Android P

Google launched Android P, the latest version of the operating system that runs on Android devices. The Android P beta is available for certain devices such as the Essential Phone, Google Pixel 2, Nokia 7 plus, Sony Xperia XZ2, Vivo and Xiaomi Mi Mix 2S. Users of these devices can update to Android P beta immediately.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Android developers. I envy you now 😏 <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/vmZzT3YAFE">pic.twitter.com/vmZzT3YAFE</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/993915423346184192?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


There are a bunch of features that Google added to Android P to make users have such a delightful experience. Google CEO made it clear that it's key that humans have a healthy digital wellbeing and this is paramount in the new Android P features.

<include src="TweetQuote" quoteText="Google CEO made it clear that it's key that humans have a healthy digital wellbeing."/>

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Android P helps you set limits on time spent using apps.<br><br>“Yo, go spend time with your family”<br><br>- App timer<br>- No pings<br>- No vibrations<br><br>Introducing “Shush”. 🔥 <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/993917960887521280?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

* **Shush**: This feature ensures that there are no notifications coming in from your apps when your phone is turned face down.
* **App Dashboard**: This is a dashboard that shows how much time you spend on your apps each day. This allows you to know which apps you spend so much time on.
* **App Timer**: With the app timer, you'd get a notification when you spend more than the allocated time specified for engaging with an app.
* **Slices and Actions**: A slice is a piece of app content and action that can be surfaced outside of the app without opening the app itself. They are UI templates that can display rich, and interactive content from your app within the Google Search app. With Slices and actions, users can perform tasks faster on their devices.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Android P beta is available on these devices today! <a href="https://twitter.com/hashtag/ios18?src=hash&amp;ref_src=twsrc%5Etfw">#ios18</a> <a href="https://twitter.com/hashtag/UpgradeTodayIfYouWant?src=hash&amp;ref_src=twsrc%5Etfw">#UpgradeTodayIfYouWant</a> <a href="https://t.co/ip2KbAtDrL">pic.twitter.com/ip2KbAtDrL</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/993918689014525952?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

The Android P developer [preview](https://developer.android.com/preview/) is also available. Developers can start digging in!

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/AndroidP?src=hash&amp;ref_src=twsrc%5Etfw">#AndroidP</a> makes your phone easier to use. Enjoy a new system navigation, easy volume controls and much more. <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/aa0o5c6uVM">pic.twitter.com/aa0o5c6uVM</a></p>&mdash; Android (@Android) <a href="https://twitter.com/Android/status/993916999922208768?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## ML Kit

Google announced a new [Machine Learning Kit](https://firebase.google.com/products/ml-kit) for mobile developers. The ML Kit ships with a set of ready-to-use APIs for common use cases:

* Text Recognition.
* Face Detection.
* Barcode Scanning.
* Image Labelling.
* Landmark Recognition.
* Smart Reply as seen in Gmail.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">ML kit - ready to use models on top of TensorFlow optimized for mobile.<br><br>Cross platform. Runs on Android and iOS. This is fantastic 🔥🔥🔥<a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/62mStjP9C1">pic.twitter.com/62mStjP9C1</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/993915721229914112?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

The Machine Learning Kit allows developers to easily add powerful machine learning features to Android and iOS apps.

*Updated*: Auth0 wrote more about ML Kit. Take a deeper look and [learn about the different APIs available in Google's ML Kit](https://auth0.com/blog/a-look-at-android-ml-kit-the-machine-learning-sdk/). As well, follow the tutorial in that article to develop a demo app that uses one of ML Kit's APIs.

## Material Theme

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Material theming ❤️ <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <br><br>1. It’s extensible<br>2. It puts you in charge.<br>3. Hundreds of new examples<br>4. Very flexible. Debunks the theory of apps looking similar <a href="https://t.co/QNfJcfGE0R">pic.twitter.com/QNfJcfGE0R</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/993950735841701888?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Material design is an opinionated design framework for apps designed by Google. However, developers all over the world including me have raised concerns about several apps looking similar from a design point of view. And Google decided to do something about it.

![Material Theme](https://images.ctfassets.net/23aumh6u8s0i/2dXplPiGHXV0arYPvY7hWE/68bfcd852cc44f0a730be303dcf93ac2/materialtheme)
_Material theme_

Google launched Material theming, a set of extensible and customizable theming components. Material themes give developers a lot of freedom when using Material design in their apps. Google also added a new set of icons and a Material theme editor to create and modify components to customized taste.

![Material theme 2](https://images.ctfassets.net/23aumh6u8s0i/kDecdaGNnPlA2WSizKN97/30779900f8e07c3ac29e99f6b83f5664/materialtheme2)

Get started with [Material theme here](https://design.google/library/making-more-with-material).

## Google Lens

The Google Lens shipped with some amazing new features. Now, Google Lens allows you copy-paste text from a photo in the real world to your phone. It also provides the ability to take a photo and instantly provide information about the objects and landmarks in the photo.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Google Lens on steroids. Improved AI <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/dPy2qR5w6M">pic.twitter.com/dPy2qR5w6M</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/993922700518211584?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Google Lens introduced **Style Match**. With Style Match, you could take a photo of a fashion item such as a shirt, blouse, shoe, or a fancy lamp. Once captured, a blue dot appears on the photo. Tap the dot, and Google Lens will provide lists of items similar to it. What a time to be alive!

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">And Lens will soon work in real time. By proactively surfacing results and anchoring them to the things you see, you&#39;ll be able to browse the world around you, just by pointing your camera → <a href="https://t.co/A1nUSk8zsK">https://t.co/A1nUSk8zsK</a> <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://t.co/0xNI4dZez8">pic.twitter.com/0xNI4dZez8</a></p>&mdash; Google (@Google) <a href="https://twitter.com/Google/status/993923125275340800?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


![Google Lens 1](https://images.ctfassets.net/23aumh6u8s0i/6FBM6LzSa2jbHaGJU3ce1y/73b3e811881259b79f5287e6fb7a6612/googlelenslandmarks)
_Landmark_

![Animal](https://images.ctfassets.net/23aumh6u8s0i/24iCxuzKHetFrNrAnXyKkW/92a18571c9bff69324cddf0b5ff53c6f/googlelensdog)
_Animal recognition_


## Google Maps

Google announced better navigation for Google Maps aided by AI. Before now, Google Maps was difficult for users that are not familiar with the _North, South, West, East_ form of directions.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Google Maps: “Head South”<br><br>Me: Where the hell is south???<br><br>Google just took care of one of my most pressing needs!!! <br><br>Google Maps enhanced with AI &amp; Computer vision! <a href="https://t.co/4W80zojuYt">pic.twitter.com/4W80zojuYt</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/993921549781487616?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

The new Google Maps provides a street view with a very obvious direction sign. With Google Assistant in navigation in Google Maps, it provides users a better description of routes. It also adds a cute navigation animal that allows the map user quickly identify the route to take. I'm stoked about this addition because I have always wanted a better form of navigation. I'm a nomad hence the excitement!

![Google Maps direction](https://images.ctfassets.net/23aumh6u8s0i/41HiRxgmR9AMZwo0ihfsny/cdf3aeb544804225f8aa7883443e1954/right)
_Maps direction_

![Google Maps Animal COntroller](https://images.ctfassets.net/23aumh6u8s0i/1AT6v3kz9GgBzEQQSDMnWv/2224189aa64fd06e48ef5b4887c4db9e/cuteanimalcontroller)
_Navigation animal_

## Smart Display

Google is launching its first smart display in July. Google's smart display is powered by Google Assistant and Youtube.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> keynote <a href="https://twitter.com/hashtag/sketchnotes?src=hash&amp;ref_src=twsrc%5Etfw">#sketchnotes</a> <a href="https://t.co/ptQOHtDg0f">pic.twitter.com/ptQOHtDg0f</a></p>&mdash; Chiu-Ki Chan (@chiuki) <a href="https://twitter.com/chiuki/status/993926968440586240?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Finally, the dates for Chrome Dev Summit have been announced.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Finally!!!!  ❤️❤️❤️ <a href="https://twitter.com/hashtag/io18?src=hash&amp;ref_src=twsrc%5Etfw">#io18</a> <a href="https://twitter.com/hashtag/SaveTheDate?src=hash&amp;ref_src=twsrc%5Etfw">#SaveTheDate</a> <a href="https://t.co/huYxi1Bq4o">pic.twitter.com/huYxi1Bq4o</a></p>&mdash; Prosper @ Google I/O 18 🔥🚀 (@unicodeveloper) <a href="https://twitter.com/unicodeveloper/status/993968457187147776?ref_src=twsrc%5Etfw">May 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<include src="asides/AboutAuth0" />


## Conclusion

Google I/O, Day 1 was incredible. These major announcements are signs that AI is the future. Software is eating the world. Already looking forward to **#Day2** and the fresh inspiring moments it will bring along with it!

<include src="TweetQuote" quoteText="These major announcements are signs that AI is the future. Software is eating the world."/>

If you were around for _#GoogleIO - Day 1_, let me know the announcements and talks that inspired you in the comment section. 😃


Google I/O 2018 Summary - Day 1

auziros:jeana-tahnk

Jeana has been in the tech industry for 15+ years, both as a communications professional and writer. As Director of Global Communications at Auth0, she works with her internal team and external agencies to amplify the company's visibility worldwide and establish its leadership in the identity industry. When she is not working, she can most likely be found on a field watching one of her three kids playing sports, or cleaning up after her one-year-old retriever who chews everything.

Senior Director, Global Communications

Jeana Tahnk

Feature-rich end-to-end identity management service now available to all Google Cloud users.



**BELLEVUE, Wash. – February 7, 2018** – [Auth0](https://auth0.com/), a global leader in Identity-as-a-Service (IDaaS), today announced that it has joined the [Google Cloud Platform Partner Program](https://cloud.withgoogle.com/partners/detail/?id=CIGAgICAgICzrQE%3D&language=en) as a technology partner, giving Google Cloud customers the ability to utilize Auth0’s feature-rich platform for all their identity and access management (IAM) needs.

As a partner, Auth0 provides Google Cloud customers with the ability to secure Google Cloud endpoints and seamlessly implement secure identity management into their products and services.

“Being a Google Cloud partner gives us access to an expansive network of customers that depend on outstanding, easy-to-implement cloud solutions to build their businesses faster,” said Eric Snyder, Senior Director of Partners at Auth0. “Identity management is the cornerstone of any digital experience, and we are excited to be part of a program that recognizes its importance.”

Google Cloud Platform customers can accomplish many identity-related tasks with Auth0, such as:

* Authentication with multiple sources (Google, Facebook, etc.) or enterprise identity systems (Windows Azure AD, ADFS, or SAML)
* Support for linking different login accounts to the same user
* User migration from existing systems
* User analytics for more effective personalization
* Security features such as [Multifactor Authentication](https://auth0.com/multifactor-authentication), [Breached Password Detection](https://auth0.com/breached-passwords), and [Anomaly Detection](https://auth0.com/learn/anomaly-detection/)

For additional information, please visit [auth0.com/learn/gcp](https://auth0.com/learn/gcp/).

<include src="asides/AboutAuth0" />

### Media Contact

Jeana Tahnk<br>
Corporate Communications<br>
Auth0<br>
[jeana.tahnk@auth0.com](mailto:jeana.tahnk@auth0.com)

Kasia Hall<br>
Matter for Auth0<br>
[khall@matternow.com](mailto:khall@matternow.com)<br>
971-246-7898



Auth0 Joins the Google Cloud Partner Program

dbafebf712fa816299231d2763fd292e?s=200 avatar

dbafebf712fa816299231d2763fd292e?s=200

Chidume Nnamdi

In this article, we are going to learn how to host and run a LoopBack application on Google App Engine. We will also set up Firestore as the database of our application.

Run a LoopBack App on Google App Engine

bruno-krebs

I am passionate about developing highly scalable, resilient applications. I love everything from the database, to microservices (Kubernetes, Docker, etc), to the frontend. I find amazing to think about how all pieces work together to provide a fast and pleasurable experience to end users, mainly because they have no clue how complex that "simple" app is.

R&D Content Architect

Bruno Krebs

Let's check how to sign into Microsoft products, like Office 365, with Google Apps users.

Signing into Microsoft Office 365 with Google Apps

OAuth authorization requests made to Google via embedded browsers have been blocked by Google.



Last year, Google warned that starting **April 20, 2017**, it will no longer allow OAuth requests to Google via embedded browsers, otherwise known as web views. Before now, developers could successfully use web views such as the WebView UI element in Android, UIWebView/WKWebView in iOS, and the equivalents on Windows and OS X to make OAuth requests to Google.

In November, 2016, Google added a notification to their iOS consent page to create awareness amongst developers of the forthcoming deprecation. Earlier this year, **March 2017**, Google added the same notification on the Android consent page.

As of April 20, 2017, Google has blocked OAuth authorization requests via web views. Unfortunately, a lot of developers have not migrated their current apps away from using embedded browsers to make such requests. Therefore, users trying to use their Google accounts to sign in to third party apps that still make use of web views for OAuth logins constantly get the dreaded **403 disallowed_useragent** error like the one below:

<img src="https://images.ctfassets.net/23aumh6u8s0i/5j6Trz9XThrMGb8HQjpDvR/bcf5033d19688de860392db30dc3ab2b/403error" width=400 height=400 />

---

## Solution for Users and Developers

One way to fix this challenge is for developers to upgrade their apps to use the recommended **Google Sign-in** SDK for sign-in and OAuth with Google Accounts for [Android](https://developers.google.com/identity/sign-in/android) and [iOS](https://developers.google.com/identity/sign-in/ios).

Another option is to make use of *AppAuth* (open source OAuth client library) for [Android](http://openid.github.io/AppAuth-Android), [iOS and OSX](http://openid.github.io/AppAuth-iOS).

Google also offers [GTMAppAuth library](https://github.com/google/GTMAppAuth)(iOS and OSX), which enables you to use [AppAuth](http://openid.github.io/AppAuth-iOS) with the [Google Toolbox for Mac - Session Fetcher](https://github.com/google/gtm-session-fetcher) and [Google APIs Client Library for Objective-C For REST](https://github.com/google/google-api-objectivec-client-for-rest) libraries by providing an implementation of `GTMFetcherAuthorizationProtocol` for authorizing requests with AppAuth.

Windows developers can check the [OAuth for Apps: Windows Samples](https://github.com/googlesamples/oauth-apps-for-windows) to learn how to use the device browser (and not an embedded browser) to implement an OAuth Authorizatiom flow to Google in a native app. These are the specific samples:

* [OAuthUniversalApp](https://github.com/googlesamples/oauth-apps-for-windows/blob/master/OAuthUniversalApp/README.md) - Universal Windows Platform app sample.
* [OAuthDesktopApp](https://github.com/googlesamples/oauth-apps-for-windows/blob/master/OAuthDesktopApp/README.md) - Traditional desktop app sample, **WPF(Windows Presentation Foundation)**.
* [OAuthConsoleApp](https://github.com/googlesamples/oauth-apps-for-windows/blob/master/OAuthConsoleApp/README.md) - Console application sample.

## Aside: Using Auth0

One of the most complex features to implement in an application is [user authentication and identity management](https://auth0.com/user-management). Auth0 ships by default with the ability to use device browsers (and not embedded browsers) for Google Sign-in and OAuth with Google accounts. As a developer, using companies like Auth0 to implement this functionality saves you a lot of headache. You won't have to care about changes in the implementation, as Auth0 will take care of them.

![Auth0 hosted login screen](https://images.ctfassets.net/23aumh6u8s0i/4ve30M1qt7GmE2nAYNKOhs/358e1f9aab4405b66fbeb5ca4cfa1eae/angular-aside-login)

Check out how to use [Auth0 Lock for web and native applications](https://auth0.com/lock). Also check out our [quickstarts](https://auth0.com/docs/quickstart/).

> [Auth0 offers a generous **free tier**](https://auth0.com/pricing) to get started with modern authentication.

## Conclusion

Switching away from embedded browsers might be a bit of work, but it provides a large user benefit. This should increase the conversion rate of your sign-in flow because users who are already signed into Google will be able to sign into your app via the tap of a single button. Furthermore, users will experience a smooth login experience, as those that are not signed in will have to sign into Google for the first app they use, but then won't have to sign in again for subsequent apps.


Google Blocks OAuth Requests Made Via Embedded Browsers

Learn how the Google Docs Phishing Scam was perpetrated and how it could have been avoided.



Two days ago, there was a large phishing scam that plagued the internet. It was a *Google Doc* phishing attack perpetrated via Gmail. On Wednesday, a worm in the form of an email arrived in a lot of Gmail users' inboxes from contacts they knew. The email stated that a Google Doc document had been shared with them.

![Email claiming a document had been shared](https://images.ctfassets.net/23aumh6u8s0i/5uEW1PGYAvahiyNqUjRSSm/a75b3e82bce4c1f4cfc4b9c8cba8c402/sharedwithme)
_Email claiming a document had been shared_

If the user clicked the link to open the document, it immediately redirected the user to a Google account selection screen for authorization.

![Google Account Selection Screen](https://images.ctfassets.net/23aumh6u8s0i/5Ol9BqIjG1bSPKj9xzWxnx/7cafc80089ebf67644ee0b9c6ac3a3e9/googleaccountselection)
_Google Account Selection Screen_

---

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Phishing (or malware) Google Doc links that appear to come from people you may know are going around. DELETE THE EMAIL. DON&#39;T CLICK. <a href="https://t.co/fSZcS7ljhu">pic.twitter.com/fSZcS7ljhu</a></p>&mdash; Zeynep Tufekci (@zeynep) <a href="https://twitter.com/zeynep/status/859840026082988038">May 3, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

If the user gave the fake app posing as *Google Docs* permission, it had the ability to *read*, *send*, *delete* and *manage* your email. It also had the ability to manage your accounts. These permissions allowed the worm to replicate itself by sending itself to all your contacts.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/zeynep">@zeynep</a> Just got this as well. Super sophisticated. <a href="https://t.co/l6c1ljSFIX">pic.twitter.com/l6c1ljSFIX</a></p>&mdash; Zach Latta (@zachlatta) <a href="https://twitter.com/zachlatta/status/859843151757955072">May 3, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

---

## Swift Combat Action From Google

Once Google got wind of this phishing scam, they swept into action by disabling the malicious accounts, removed fake pages and pushed updates through Safe Browsing to users within an hour. It is highly commendable that Google nipped it in the bud early enough.

![Google Action](https://images.ctfassets.net/23aumh6u8s0i/25aK7IDG3WM9iyJOrbhF4X/a292b1cfc25c8abf9230138c85ca834b/reddit)
_Googlers taking charge_

## What to Do if You Granted Permission

If you already gave the fake *Google Docs* app permission, here is how to protect yourself.

1. Head over to [https://myaccount.google.com/permissions](https://myaccount.google.com/permissions).
2. Find the app named **Google Docs**.
3. Revoke the permission by clicking the **Remove** button.

## How to Avoid Phishing Scams

Phishing scams have been around for a long time and they aren't going anywhere soon. Just last year, there was a case of a hacker who [stole nude pictures from celebrities](http://www.bbc.com/news/technology-36702837) via a phishing scam that targeted iCloud accounts.

Here are a few tips to help you avoid falling victim to these scams.

1. **Look out for fake and forged Sites:** Verify that the site is secure by ensuring that the URL starts with https:// instead of http. Look out for typos in the site name and URL.
2. **Install an anti-phishing toolbar:** You can install these toolbars on your Internet browsers. They check the sites that you are visiting and compares them to lists of known phishing sites.
3. **Beware of links and attachments in your emails:** Before you click on a link in your email, hover over it and check if the link actually links to a legitimate secure site. Don't click on links that appear in random emails and instant messages.
4. **Regularly update your browser**.
5. **Beware of pop ups**: Virtually all browsers allow you to block pop-ups, so you can set that as the default action. You can allow pop-ups sparingly when you actually need them.

## Aside: Implementing API Authorization with Auth0

This phishing attack took advantage of the OAuth protocol, a convenient way for internet accounts to link with third-party applications. Users don't have to hand over any password information. They just grant permission to a third party app.

One of the features Auth0 provides is [API Authentication and Authorization using the OAuth 2.0 authorization framework](https://auth0.com/docs/api-auth). Auth0's API authorization features allow you to manage the authorization requirements for server-to-server and client-to-server applications. If you want to use Auth0 authentication to authorize _API requests_, note that you'll need to use [a different flow depending on your use case](https://auth0.com/docs/api-auth/which-oauth-flow-to-use).

In addition, our *ODIC Conformant Authentication* pipeline allows you to create third-party clients for your APIs and display consent dialogs for authorization.

If a user is authenticating through a third-party client and is requesting authorization to access the user's information or perform some action at an API on their behalf, they will see a consent dialog like so:

![Consent Dialog](https://images.ctfassets.net/23aumh6u8s0i/2nVdix1kfZCLHjn6rFWvsp/79b2190997019e864014777ccfc5b7d9/consent-dialog)
_Consent Dialog_

If the user chooses to allow the application, this will create a user grant which represents this user's consent to this combination of client, resource server and scopes. The client application will then receive a successful authentication response from Auth0. However, if a user decides to reject consent to the application, they will be redirected to the `redirect_uri` specified in the request with an `access_denied` error like so:

```bash

HTTP/1.1 302 Found
Location: https://fabrikam.com/contoso_social#
    error=access_denied
    &state=...

```

> Auth0 provides the simplest and easiest to use [user interface tools to help administrators manage user identities](https://auth0.com/user-management) including password resets, creating and provisioning, blocking and deleting users.

## Conclusion

At Auth0, we are passionate about security. I hereby recommend this [personal information security identity guide for you, your friends and family](https://auth0.com/blog/personal-information-security-identity-guide). Take the time to go through this guide and protect yourself from cybercriminals and phishing scams.


All You Need To Know About The Google Docs Phishing Attack

9cf3b2625e7daf7aa5d01542fbedb2c5

Steve Lee

Learn to use Node with Azure Functions with Google APIs and Auth0.



*Guest post by [@SteveALee](https://twitter.com/@SteveALee) of [OpenDirective.com](http://opendirective.com)*

**TL;DR:** Learn how Node.js backend code via Azure Functions can access a Google API once a user logs in with Google via the Auth0 Lock widget.

---

Without a doubt, authentication for web apps is one of the most complex features to implement correctly. If you’re not careful, it will eat a large chunk of your development time. Worse, if you don't get it exactly right you're left vulnerable to being hacked, which will take even more of your precious time, not to mention damaging your reputation. Therefore, it's nice to have Auth0 around to help mitigate this problem with their flexible service along with some of the best documents and support in the business. I picked a complex case as my first attempt at auth for a Single Page App (SPA) Software as a Service (SaaS) product.

> Auth0 provides the simplest and easiest to use [user interface tools to help administrators manage user identities](https://auth0.com/user-management) including password resets, creating and provisioning, blocking and deleting users.

This post is the story of my experience along with some working JavaScript code for [Azure Functions](https://azure.microsoft.com/en-us/services/functions/) with [Auth0](https://www.auth0.com).

##Serverless Architecture
Azure Functions are part of Microsoft’s offering in the relatively new Serverless Architecture space. Sometime referred to as Functions as a Service (FaaS), Serverless Architecture allows you to concentrate your development offerts on you ‘Business Logic’ or backend application code. In this extension of Platform As a Service (PaaS), Microsoft manage all the lower layers of the hardware and software stack for you. For example: servers, operating systems, web servers and even platforms such as Node.js.  Note that serverless code is event driven and triggers may be HTTP requests but can also be from other sources such as a database update. This [introductory article](https://www.martinfowler.com/bliki/Serverless.html) on MartinFlower.com explains a web app use of Serverless Architecture and also links to a very thorough post by Mike Roberts.  

##The Problem
I'm developing a set of open source components used in a commercial SaaS designed to support the needs of people with cognitive disabilities or low digital literacy. The initial components and product will provide simplified access to shared photographs and email. Given this, Google Picasa and Gmail seemed like natural choices for the initial underlying services. Unfortunately, the Picasa API has been feature stripped recently when Google moved over to Google Photos.

My initial requirement for the user experience is that they can easily authenticate by signing into their existing Google account. The code should then be able to access their photos and emails, using the Picasa and Gmail APIs. This will require authorized access based on the user credentials provided when they sign in. The initial user story that we cover in this post is:

>As a user, I want to log into the app with my Google account so I get a list of my Google Photos albums.

That all seemed fairly straightforward after spending some time learning the basics of OAuth and OpenID flows from a mixture of Auth0 and OpenID documentation. Then I read the various Google API and auth docs and ended up confused. Google spreads the documentation around several places and it is not always consistent or precise. In addition, Google’s docs are often unclear on whether they are describing access from a client or backend and which specific authentication flows they are talking about. Finally, they often use their own SDKs (or libraries), which obscures the details and is largely irrelevant. This also adds another large download for client users.

##Getting Nowhere Very Slowly

After exploring the Google APIs with some experimental code accessing them directly from the SPA I wanted to pull my hair out. The Picasa API in particular is very flaky in how it handles CORS and authentication. Plan B was to use Auth0 to do all the heavy lifting. My hope was their Lock widget would solve the technical issues relatively easily. For example, Lock handles the `nonce` and `state` attributes used to stop hacking. Lock is also flexible in user experience options, for example it easily allows the addition of extra services. However, I soon found out the `access_token` that Lock provides to a SPA is not usable in Google APIs and it was hard to find any answers.

> [Lock is an embeddable login form for desktop, tablet and mobile devices.](https://auth0.com/lock) It provides the easiest way for securing your website and mobile apps.

At this point, I started to think that backend access was going to be the solution. In addition to reliable access there's also the question of what to do when tokens expire. We need to avoid having the user keep logging in, so refresh tokens will be required which must be stored securely in the backend, as they effectively allow endless access. Several other design requirements pointed to backend access, and using Azure Functions meant a rapid development and relatively low DevOps requirements. Win - win.

I found after more experimental code that this did eventually work out, but only after I stumbled across a highly relevant Auth0 document and requested help from the awesome Nico, a Customer Success Engineer at Auth0. As Nico pointed out, if you use Auth0 as the identity provider then even when proxying other third party identity providers, the `access_token`s you get are from Auth0. They can be used with Auth0 APIs or your own, but are not what third party APIs require. Auth0 does provide a mechanism for backend code to get the `access_token` from third party identity providers. However, the token is hidden in the Auth0 UI for security purposes.

##Auth0 and Azure Functions: Making Life Easy

Without further delay, here's the low-down on what you need to do to let a user sign in with Google via the Auth0 Lock and then access a Google API with their credentials, using the Google `access_token`. I'll also present some links to important docs. Here's the complete flow we use:

1. SPA displays the Auth0 Lock passing suitable options
1. User logs in with Google, approving access to requested scopes (eg read photos, read emails)
1. If required, Auth0 creates a new Auth0 user linked to the Google user
1. SPA gets the Auth0 user `id_token` and `access_token`
1. SPA calls the backend HTTP endpoint to get a list of photos, etc., and passes the `access_token` with this request
1. Backend Azure Functions validates the JWT and optionally checks the user is allowed access
1. Backend uses the userid in the `access_token` to find the user profile using the Auth0 admin API
1. Backend extracts the Google `access_token` from the user’s profile.
1. Backend calls the Google Picasa API and processes the results, returning them to the SPA in the HTTP response

In order for this to work, you need to have the following configured:

* A Google Photos account with some photos, preferably in several albums
* Auth0 web Client for the SPA - [Authentication for Client-side Web Apps](https://auth0.com/docs/client-auth/client-side-web)
* Google OAuth client for backend access to APIs - [Connect Your Client to Google](https://auth0.com/docs/connections/social/google)
* Auth0 API definition for the API - [Call APIs from Client-side Web Apps](https://auth0.com/docs/api-auth/grant/implicit)
* Auth0 non-interactive client for backend access to Auth0 management API - [Call an Identity Provider API](Call an Identity Provider API)
* Azure account and an [Azure Functions App](https://azure.microsoft.com/en-us/services/functions/)

You should also read:

* [Auth0 Overview](https://auth0.com/docs/overview)
* [Identity Provider Access Tokens](https://auth0.com/docs/tokens/idp)
* [Lock for Web](https://auth0.com/docs/libraries/lock)
* [Create your first Azure Function](https://docs.microsoft.com/en-us/azure/azure-functions/functions-create-first-azure-function)

Here is a simple vanilla HTML and JavaScript example that allows the user to sign in with the Auth0 Lock and then calls the Azure Functions backend to get a list of Google Photos albums:

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auth0 and Google APIs</title>
  <script src="https://cdn.auth0.com/js/lock/10.9.1/lock.min.js"></script>
</head>
<body>
  <button id="btn-login">Login</button>
  <button id="btn-get">Get Albums</button>
  <pre id="profile"/>

  <script>

  function getGoogleAlbums(accessToken) {
    var AZUREFUNCTION = 'AZURE FUNCTION URL HERE'
    var xmlhttp = new XMLHttpRequest()
    xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 /*&& this.status == 200*/) {
              alert(this.status+'\r\n'+this.responseText.replace(/\\"/g,''))
          }
      }
      xmlhttp.open("GET", AZUREFUNCTION, true);
      xmlhttp.setRequestHeader('Authorization', `Bearer ${accessToken}`)
      xmlhttp.send();
  }

  var lock = new Auth0Lock(
    'THIS CLIENTS ID HERE',
    'DOMAIN.eu.auth0.com',
    {
      allowedConnections: ['google-oauth2'],
      allowForgotPassword: false,
      allowSignUp: false,
      closable: false,
      auth: {
        connection_scopes: {
          'google-oauth2': ['https://picasaweb.google.com/data/']
        },                
        params: {
          scope: 'openid profile photos',
          audience: 'https://API_ID HERE'
           },
        responseType: "id_token token"
      },
      languageDictionary: {
        title: "Sign into Google"
      }
  }
  );

  // Listening for the Lock authenticated event
  lock.on("authenticated", function(authResult) {
    localStorage.setItem('accessToken', authResult.accessToken);
    localStorage.setItem('idToken', authResult.idToken);
    lock.getUserInfo(authResult.accessToken, function(error, profile) {
      if (error) {
        // Handle error
        return;
      }
      localStorage.setItem('profile', JSON.stringify(profile));
    });
  });  

  document.getElementById('btn-login').addEventListener('click', function() {
    lock.show();
  })
  document.getElementById('btn-get').addEventListener('click', function() {
    var accessToken = localStorage.getItem('accessToken')
    var idToken = localStorage.getItem('idToken')
    getGoogleAlbums(accessToken)
  })

  function view() {
    // Verify that there's a token in localStorage
    var token = localStorage.getItem('accessToken');
    if (token) {
      showProfile();
    }
  }
  function showProfile() {
      var profile = JSON.stringify(JSON.parse(localStorage.getItem('profile')),null,2);
      document.getElementById('profile').textContent = profile;
  }

  view()

  </script>
</body>
</html>
```

Now for the Azure Functions backend code. This is a JavaScript HTTP Azure Function with the method set to `GET`. Tokens are passed from the frontend code above in a URL parameter.

Note, this initial block of constants should not normally be included in the main code (if only to stop you accidently checking your secrets into GitHub). Rather it’s good practice to place them in the Function App Service’s Settings and reference them from the code.

```js
// constants
const AUTH0_DOMAIN_URL = 'https://DOMAIN.auth0.com'
const AUTH0_API_ID = 'https://API_ID'
const AUTH0_SIGNING_CERTIFICATE = `-----BEGIN CERTIFICATE-----
<Get this from the Auth0 client Advanced settings -> certificates>
-----END CERTIFICATE-----`
const AUTH0_ADMIN_CLIENT_ID = 'YOUR ADMIN CLIENT APP ID'
const AUTH0_ADMIN_CLIENT_SECRET = 'YOUR ADMIN APP CLIENT SECRET'
```

This main body of the code can be added via the Azure Functions console:

```js
// Create decorator that checks the JWT signature and specified fields
const jwtValidateDecorator = require('./azure-functions-auth0')({
  clientId: AUTH0_API_ID,
  clientSecret: AUTH0_SIGNING_CERTIFICATE,
  algorithms: ['RS256'],
  domain: `${AUTH0_DOMAIN_URL}/`
})

// The main Functions Function
module.exports = jwtValidateDecorator((context, req) => {
    if (req.user) {
        // Get a token to access the admin API
        getAdminAccessToken()
        .then(({object: {access_token}}) => {
            const userId = req.user.sub     // has been added to the req by the decorator
            return getUserProfile(access_token, userId)
        })
        // Get the album list from google
        .then(({object}) => {
            const google_access_token = object.identities[0].access_token  // hidden from the Auth0 console
            return getAlbums(google_access_token)
        })
        // Get the album titles
        .then(({object: {feed: {entry}}}) => {
            const titles = entry.map(ent => ent.title.$t)   
            return {
                status: 200,
                body: JSON.stringify(titles),
                headers: {'Content-Type': 'application/json'}
            }
        })
        .catch(err => {
            return {
                status: 400,
                body: err.message
            }
        })
        .then(res => {   
            context.done(null, res)
        })
    }
    else {
        const res = {
            status: 400,
            body: 'Something is wrong with the Authorization token'
        }
        context.done(null, res)
    }
})
```

Here are the supporting functions called from the main code block above. They can be placed in the same Function for simplicity. An alternative is to place them in a separate module file and “require” them as usual with Node.js. Azure Functions allows you to provide several Functions and supporting code in a single Functions App.
const request = require('request')

```js
// Call a remote HTTP endpoint and return a JSON object
function requestObject(options) {
    return new Promise((resolve, reject) => {
        request(options, function (error, response, body) {
            if (error) {
                reject(error);
            } else if ((200 > response.statusCode) || (299 < response.statusCode)) {
                reject(new Error(`Remote resource ${options.url} returned status code: ${response.statusCode}: ${body}`))
            } else {
                const object = (typeof body === 'string') ? JSON.parse(body) : body // FIXME throws
                resolve({code: response.statusCode, object})
            }
        })
    })
}

// Get an access token for the Auth0 Admin API
function getAdminAccessToken() {
    const options = {
        method: 'POST',
        url: `${AUTH0_DOMAIN_URL}/oauth/token`,
        headers: { 'content-type': 'application/json' },
        body: { client_id: AUTH0_ADMIN_CLIENT_ID,
            client_secret: AUTH0_ADMIN_CLIENT_SECRET,
            audience: `${AUTH0_DOMAIN_URL}/api/v2/`,
            grant_type: 'client_credentials'
        },
        json: true
    }
    return requestObject(options)
}

// Get the user's profile from the Admin API
function getUserProfile(accessToken, userID) {
  const options = {
    method: 'GET',
    url: `${AUTH0_DOMAIN_URL}/api/v2/users/${userID}`,
    headers: { 'Authorization': `Bearer ${accessToken}`
             }
    }
    return requestObject(options)
}

// Get user Google Photos album list
function getAlbums(accessToken) {
    const options = {
        method: 'GET',
        //url: `https://www.googleapis.com/gmail/v1/users/me/labels`,
        url: 'https://picasaweb.google.com/data/feed/api/user/default?alt=json',
        headers: { 'Authorization': `Bearer ${accessToken}`
        }
    }
    return requestObject(options)
}
```

We need to check the Auth0 `access_token` is valid before allowing the API code to be executed. This is done by a decorator (or wrapper) function based on the `npm azure_functions_auth0` module but modified to work correctly with an Auth0 API `access_token`.

```js
// azure_functions_auth0.js
// based on the npm package azure-functions-auth0
// But modified to handle the Auth0 API accessToken

const jwt = require('express-jwt');
//import ArgumentError from './errors/ArgumentError';
const ArgumentError = Error

module.exports = (options) => {
  if (!options || !(options instanceof Object)) {
    throw new ArgumentError('The options must be an object.');
  }

  if (!options.clientId || options.clientId.length === 0) {
    throw new ArgumentError('The Auth0 Client or API ID has to be provided.');
  }

  if (!options.clientSecret || options.clientSecret.length === 0) {
    throw new ArgumentError('The Auth0 Client or API Secret has to be provided.');
  }

  if (!options.domain || options.domain.length === 0) {
    throw new ArgumentError('The Auth0 Domain has to be provided.');
  }

  const middleware = jwt({
    secret: options.clientSecret,
    audience: options.clientId,
    issuer: options.domain,
    algorithms: options.algorithms
    })

  return (next) => {
    return (context, req) => {
      middleware(req, null, (err) => {
        if (err) {
          const res = {
            status: err.status || 500,
            body: {
              message: err.message
            }
          };

          return context.done(null, res);
        }

        return next(context, req);
      });
    };
  };
};
```

##Running the Code

For a local client development server, I simply installed npm package ['lite-server'](https://www.npmjs.com/package/lite-server) configured to port 8000 with a ‘bs-config.json’ file.

For the backend, you'll need to create an HTTP Azure Function with the method set to GET. You'll also need to install the two npm dependencies of `express-jwt` and `request`. In the Azure Functions control panel go to "Functions App Settings" -> "Console" to open up a console. Then `cd` to the folder for your function and enter the following command:

```bash
npm install express-jwt request
```

You'll also need to set up CORS by adding your client URL - eg. localhost:8000. This is found in the Azure Functions console panel and click on "Function app settings" -> "Configure CORS". Finally, copy the Function’s URL into the SPA code constants block.

##Observations

As this is a Serverless backend with no local state storage, the same authorization code will run for every similar endpoint. We can tidy up the code to be more DRY (Don’t Repeat Yourself) by moving the code to get the Auth0 Admin and Google `access_token`s into a module shared by all your Functions in the Function App.

##Conclusion

Auth0 provides all the features needed to access Google APIs with a user’s credentials. When a user signs in through Auth0 you get an Auth0 access token. You then need to obtain the third party access token for Google’s APIs. This is done with backend code for security. The code accesses the user’s profile via the Auth0 Admin API and can then obtain the access token provided when the user signed in with Google.

Azure Functions provides an ideal way to create the backend code in Node.js without the need to create and configure servers or Node itself. An HTTP function is easy to create and configure via the Azure Functions control panel, or everything can be done locally and then deployed to Azure.

Best of all, both Auth0 and Azure Functions provide free subscriptions that allow you to explore them in detail. Have fun!

> [Auth0 offers a generous **free tier**](https://auth0.com/pricing) to get started with modern authentication.


Using Serverless Azure Functions with Auth0 and Google APIs

diegopoza

System Engineer, geek, foodie, technology lover, speaker.

Sr Manager, Developer Advocacy

Diego Poza

Tavis Ormandy, a vulnerability researcher at Google, discovered that Cloudflare was accidentally leaking sensitive data including passwords, private messages, and more. Learn how this may affect you and your customers and what to do next.



On February 17th, Tavis Ormandy, a vulnerabilities researcher at Google, sent the tweet that kicked off 2017's biggest security story yet:

![Tweet](https://images.ctfassets.net/23aumh6u8s0i/70lrHor3JHJ2mpMhcIYmD0/a8ae61fe8062a2abad060c9707f51819/tweet)

*Could someone from cloudflare security urgently contact me.* That's not something anyone wants to read on a Friday afternoon, but especially not when it's coming from one of the world's top infosec researchers.

The problem? While doing some routine bug checking, [Ormandy](https://twitter.com/taviso?lang=en) saw some data that did not match at all what he expected to find.

"It's not unusual to find garbage, corrupt data, mislabeled data or just ... non-conforming data...but the format of the data this time was confusing enough that I spent some time trying to debug what had gone wrong, wondering if it was a bug in my code," [he wrote](https://bugs.chromium.org/p/project-zero/issues/detail?id=1139), "In fact, the data was bizarre enough that some colleagues around the Project Zero office even got intrigued."

The rest of the Google Project Zero team (a team of security researchers employed specifically to find new [zero-day exploits](https://en.wikipedia.org/wiki/Project_Zero_(Google))) probably expected Google's announcement of the first [practical SHA-1 collision](https://auth0.com/blog/sha-1-collision-attack/) to be the big news of the week.

As they looked closer, they found “encryption keys, cookies, passwords, chunks of POST data and even HTTPS requests” for all sorts of different sites using Cloudflare—private messages, reservations, plaintext API requests from a password manager, hotel bookings.

How did all of this happen?

## Cloudflare was dumping memory across the web

It begins with a simple bug in the code to Cloudflare's highly popular reverse proxy service. HTTP requests to certain types of sites signed up with Cloudflare would trigger the bug, which would then "leak" data from random* *Cloudflare customers' sites (those that happened to be in memory at the time).

![Cloudflare](https://images.ctfassets.net/23aumh6u8s0i/SFApl9rEVZFr1bZEQnm2k/1df7cc080c9c802b225f4610a0daee12/cloudflare)

*A simple depiction of how a reverse proxy like Cloudflare's works. Since reverse proxies are shared between customers, data from all was at risk of being disclosed.*

Since September, random bits of data have been coming out of initialized memory and leaking across random Cloudflare customer's sites. In other words, if you went to visit a site that used Cloudflare, you could have had other people's sensitive information “leaking” into your own browsing session.

When search engines “crawled” these pages to index them, the same kind of information “leaked.” Because search engines cache the output they receive when they visit a page, all these leaked tokens, secrets, and messages were indexed, split up and spread across *millions* of pages of search results.

![Search Results](https://images.ctfassets.net/23aumh6u8s0i/569KQNvP3RuTSc2z9FCZy/83586ba930635d2bace66281330bc291/SERPs)

(Source: [Wordfence](https://www.wordfence.com/blog/2017/02/cloudflare-data-leak/))

While Cloudflare is working with the major search engines to purge their caches of sensitive information now, it's hard to avoid thinking about the paranoid version of events.

Paranoid version: state actors, or state-sponsored actors with significant resources, discovered this vulnerability before Google did. They found a way to send manipulated HTTP requests to Cloudflare sites that would output a predictable stream of user data—and have either packaged everything they found for resale or set about figuring out how to crack what could be billions of passwords, credit card numbers, and secret tokens.  

Cloudflare claims they can rule out this scenario with access logs, but whether or not that's true has been subject to [some debate](https://news.ycombinator.com/item?id=13721452).

> Auth0 can improve software security with the breached password detection feature. [This feature protects and notifies your users when their credentials are leaked by a data breach of a third party](https://auth0.com/breached-passwords). You can optionally prevent access until the user has reset their password.

## What you should do now

The way that data was disclosed means that any site using Cloudflare could potentially have had its secrets and tokens compromised. Patreon, Yelp, Uber, Medium, Fitbit, and OKCupid all use Cloudflare—for a full list of sites you can [click here](https://github.com/pirate/sites-using-cloudflare). Several tools have also been [built to assess your risk](http://www.doesitusecloudflare.com/), like this script that [crawls your Chrome history](https://gist.github.com/kamaljoshi/2cce5f6d35cd28de8f6dbb27d586f064).

Though many, many sites use Cloudflare, at least to some degree. It's still quite unlikely that your personal information has been exposed. Many of the individual sites mentioned have also come out and written posts to explain whether you should be concerned—perhaps most notably, 1Password, which was initially mentioned in Tavis's tweets as a [potentially compromised site](https://blog.agilebits.com/2017/02/23/three-layers-of-encryption-keeps-you-safe-when-ssltls-fails/).

The first thing you want to do to protect yourself from this and future incidents is to enable [multifactor authentication](https://auth0.com/multifactor-authentication). The most important sites to enable MFA on are the ones you use as an SSO iDP—if you're logging into 20 different sites using your Google credentials, then you definitely want to enable some form of MFA there.

While it's unlikely your passwords were exposed, this is as good a reminder as any that you should be using strong, unique passwords and organizing them using a password manager.

Resetting individual passwords for sites doesn't make much sense—the list of compromised sites is simply so vast. The only solution is to do a mass reset and make sure you're using proper password hygiene going forward.

## What you should do for your customers

As a site operator, you're probably wondering 1) if you're at risk, and 2) if any of your users' data was exposed in this incident.

Cloudflare has already reached out to domain owners that they have proactively identified as being at risk in this leak. However, the absence of notification does not mean that your domain (and customers) are safe.

First off, enable multifactor authentication [if you haven't already](https://auth0.com/multifactor-authentication). It's the easiest way to get a huge boost to the security of your site.

Many site operators have begun forcing password resets for all of their users. If you run a consumer site, it may not be worth the trouble and inconvenience. If your customers are in the enterprise, then it is probably a very good idea to force a change. If you're not going to make your users change their passwords (and from a cursory browse of the web this Monday morning, it appears that this is mostly the case), then you should at least recommend it.

As far as data invalidation, any secrets which you can easily rotate—session identifiers, tokens, keys—should immediately be changed. Customer SSL keys do not appear to have been compromised in this incident, but it would be prudent to change as much data as you can which may have passed through Cloudflare.  

If you or any of your customers are regulated by the Health Insurance Portability and Accountability Act (HIPAA), then you'll [definitely want](https://www.aptible.com/blog/aptible-was-not-affected-by-cloudbleed/) to have your security/compliance teams get in touch with your lawyers and discuss whether this is a breach that needs to be reported.


What Cloudbleed Means for You and Your Customers

99c4080f412ccf46b9b564db7f482907?s=200 avatar

99c4080f412ccf46b9b564db7f482907?s=200

I'm currently a Senior Developer Advocate at MongoDB. I'm also a Google Developer Expert for Web Technologies and spend most my time giving talks at conferences and meetups, mentoring developers and running workshops, and creating online content to help technology professionals.

Ado Kukic

The CWI Institute and Google have successfully demonstrated a practical SHA-1 collision attack by publishing two unique PDF files that produce the same hash value.



---

**TL;DR** Researchers published a technique for causing SHA-1 collisions and demonstrated it by providing two unique PDF documents that produced the same SHA1 hash value.

---

[Secure Hash Algorithm 1](https://en.wikipedia.org/wiki/SHA-1) or SHA-1 is a cryptographic hash function designed by the United States [National Security Agency](https://www.nsa.gov/) and released in 1995. The algorithm was widely adopted in the industry for digital signatures and data integrity purposes. For example, applications would use SHA-1 to convert plain-text passwords into a hash that would be useless to a hacker, unless of course, the hacker could reverse engineer the hash back into the original password, which they could not. As for data integrity, an SHA-1 hash ensured that no two files would have the same hash, and even the slightest change in a file would result in a new, completely unique hash.

According to [Wikipedia](https://en.wikipedia.org/wiki/Cryptographic_hash_function), the ideal cryptographic hash function has five main properties:

* It is deterministic so the same message always results in the same hash.
* It is quick to compute the hash value for any given message.
* It is infeasible to generate a message from its hash value except by trying all possible messages.
* A small change to a message should change the hash value so extensively that the new hash value appears uncorrelated with the old hash value.
* **It is infeasible to find two different messages with the same hash value.**

In 2005, researchers discovered potential [vulnerabilities](http://www.darkreading.com/vulnerabilities---threats/researchers-warn-against-continuing-use-of-sha-1-crypto-standard/d/d-id/1322565) in the SHA-1 algorithm and by 2010 many organizations stopped it as it was deemed [insecure](https://www.entrust.com/understanding-sha-1-vulnerabilities-ssl-longer-secure/). The potential vulnerabilities had not been proven, until today, when CWI Institute and Google demonstrated a practical collision attack against SHA-1. The researchers were able to provide two unique PDF files that produced the same exact SHA-1 hash value.

> Auth0 can improve software security with the breached password detection feature. [This feature protects and notifies your users when their credentials are leaked by a data breach of a third party](https://auth0.com/breached-passwords). You can optionally prevent access until the user has reset their password.

![Data Integrity](https://images.ctfassets.net/23aumh6u8s0i/6C5jFby0JGDlbZ7q8iBkkr/d0d3957803a2ca66d39903e4b500b395/example)

<p><small>Source: <a href="http://shattered.io/static/infographic.pdf" target="_blank">shattered.io</a></small></p>

The team published a practical technique showing how to generate a collision bringing the fears that SHA-1 was insecure to reality. The technique outlined required years of research and immense computation resources. From the research published, it would take a cluster of 110 powerful GPU’s running computations 24 hours a day for an entire year to cause a collision or about 6,500 years on a single-CPU. So while this attack vector is fairly impractical, it is not impossible.

<include src="TweetQuote" quoteText="The SHA1 collision attack required 9,223,372,036,854,775,808 SHA1 computations."/>

This is a big deal because even though many organizations have stopped using SHA-1, underlying systems still often rely on SHA-1. Software updates, ISO checksums, PGP signatures, digital certificate signatures, git, and others still make use of SHA-1 for data integrity. If a malicious party were able to create a collision for a popular piece of software, for example, and distributed it on the web, they could infect many unsuspecting users causing all sorts of damage.

On the bright side, the typical user does not have to worry too much. Certification Authorities are forbidden from issuing SHA-1 certificates, and Google and Mozilla will warn users accessing HTTPS websites that use SHA-1 signed certificates. More and more organizations are using safer alternatives like SHA-256 for their cryptographic needs. Additionally, since the published attack vector has only been proven with PDF files, the team created a website, [shattered.io](https://shattered.io), which allows you to test your PDF files and see if they could have been compromised.

For most, security is not actively thought about, but for us at [Auth0](https://auth0.com), security is the only thing we think about. Ok, not the only thing, but it’s up there. In addition to embracing open authentication standards like [OAuth](https://tools.ietf.org/html/rfc6749) and [OpenID](http://openid.net/), we follow industry standards and best practices for security and when this popped up on our radar we just had to share it. Learn more about our security practices [here](https://auth0.com/security).

> [Auth0 offers a generous **free tier**](https://auth0.com/pricing) so you can get started with modern authentication.

For more info on the SHA-1 collision attack, be sure to check out [shattered.io](http://shattered.io/) and Google’s Security Blog [post](https://security.googleblog.com/2017/02/announcing-first-sha1-collision.html). If you are using SHA-1, please switch to a more secure hashing algorithm like [SHA-256](https://en.wikipedia.org/wiki/SHA-2).


SHA-1 Has Been Compromised In Practice

Protobuf, the binary format crafted by Google, surpasses JSON performance even on JavaScript environments like Node.js/V8 and web browsers.

Beating JSON performance with Protobuf

001c9ddc5ceb9829b6aaf24f5d28502a

I am software developer with a keen interest in open-source technologies, Linux, and native development. I've worked on many different platforms Android, iOS, Win32, Linux, FreeRTOS, the Web, and others. I've gone through the whole stack and I enjoy learning and using the latest technologies. I now work as a full-stack developer at Auth0.

Senior Engineer

Sebastian Peyrott

Learn how to implement social logins on Android with Facebook, Google, Twitter and Instagram as providers

Authenticate on Android Using Social Logins

bc94ff6211e645a2bdb4fdc60e23ad85

Kassandra Perch

Setting up SAML authentication with Auth0 is as easy as setting any social connection (like Google!)



Today's video is about how easy it is to make the switch from social identity providers like Google to more complex providers, like those using SAML, using Auth0. We'll cover how in minutes, with no change to client or server code, you can easily allow users from SAML systems to log in to your Auth0 application. We've included the video, as well as a short written summary, below:

<iframe src="//fast.wistia.net/embed/iframe/2xrll0d056" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="400"></iframe>
<script src="//fast.wistia.net/assets/external/E-v1.js" async></script>

Today we'll talk about how easy it is to integrate SAML authentication with Auth0.

So let's start with a hypothetical: you're building a SaaS product, and some of your enterprise customers want their employees to be able to access your product through [Single Sign-On (SSO)](https://resources.auth0.com/definitive-guide-to-single-sign-on/?utm_source=blog)...and their Identity Provider (IdP) happens to use SAML for authentication.

SAML is a complex standard, and so implementing Federation yourself, even with [already existing libraries](https://www.npmjs.org/package/saml2-js) can be quite a nightmare, and require lots of code and maintenance.

Luckily, Auth0 supports SAML authentication (you can even use [Lock](https://auth0.com/lock)) with just a few lines of code and some configuration.

<include src="TweetQuote" quoteText="Auth0 supports SAML authentication with just a few lines of code and some configuration."/>

So what we're going to go over today is how to get that started and how easy it is to switch over to SAML authentication from a social login provider like Google.

First, we have an Express implementation (you can read more about this in [our quickstart guide for Express](https://auth0.com/docs/quickstart/webapp/nodejs/)) of Auth0 logins. All I needed to do is include [passport.js](https://npmjs.org/package/passport) and [the Auth0 strategy](https://npmjs.org/package/passport-auth0). I then use these tools in my route to check that the user has logged in once Lock has redirected the app, and logged out once Lock's logout function has redirected me:

```javascript
var express = require('express');
var router = express.Router();
var passport = require('passport');

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send(req.user);
});

router.get('/authenticate',
  passport.authenticate('auth0', { failureRedirect: '/error' }),
  function(req, res) {
    if (!req.user) {
      throw new Error('user null');
    }
    res.redirect("/");
  });

router.get('/logout', function(req, res){
	req.logout();
	res.redirect("/");
})

module.exports = router;
```

So on the client side, once you've [required the Lock.js library](https://auth0.com/docs/quickstart/webapp/nodejs/#6-triggering-login-manually-or-integrating-the-auth0lock), we just need to call `lock.show()` and `lock.logout()` to allow users to log in and out, respectively:

```javascript
$(function(){
	var lock = new Auth0Lock('FIluNL0AWyBE3hYs3exbawhJD9rZNdh3', 'kperch.auth0.com');

	$('.js-login').on('click', function(event){
		event.preventDefault();
		lock.show({
			callbackURL: 'http://localhost:3000/users/authenticate',
			rememberLastLogin: false,
			// connections: ['google-oauth2', 'auth0']
		});
	});

	$('.js-logout').on('click', function(event){
		event.preventDefault();
		lock.logout({
			returnTo: 'http://localhost:3000/users/logout'
		});
	});
})
```

So let's enable Google logins and see how this works. First, [go to the dashboard](https://manage.auth0.com/), and select 'Connections', then 'Social' from the menu on the left. Click 'Google' to open the configuration menu:

![Google connection configureation window](https://images.ctfassets.net/23aumh6u8s0i/zKLP0IHODZYay2QJG9V0s/1b0c4cf46af56319ae11efcb0f5c2da9/configure-google)

We're going to leave the 'Client ID' and 'Client Secret' blank in order to test using Auth0's API keys. So, simply hit 'Save' at the bottom of the window. You can now use Google accounts to log in to your app.

Next, we'll take a look at how to configure SAML authentication without changing *any* of the code we've already written.

First, you'll need some information from your SAML IdP. We have [documentation on many common third-party IdPs in our docs](https://auth0.com/docs/saml-configuration), including a list of the information you'll need for this tutorial:

* SSO Sign In URL
* SSO Sign Out URL
* X509 Signing Certificate

First, I turn off my Google provider. Then, click 'Enterprise' under 'Connections' in the left menu. Click 'SAMLP Identity Provider' to enter the connection management menu. Click 'Create new Connection'.

![SAML Authentication Configuration Window](https://images.ctfassets.net/23aumh6u8s0i/TlriqJpB9lCePy9U2674m/94201f76a38af63df85c3d83759f8f47/configure-saml)

Enter a name in 'Connection Name'. Then, place your SSO Sign In and Sign Out URLs in the fields labeled 'Sign In URL' and 'Sign Out URL', respectively. Finally, upload the X509 Signing Certificate by clicking the orange 'Upload Certificate' button.

You can enter domains under 'Email Domains' in order to tell Lock which user emails should be filtered through to this SSO connection.

That's it for SAML authentication configuration! Click 'Save' and 'Continue'. You will see a list of instructions-- you will need to provide these instructions to your IdP in order to complete the process (if you are using a third-party, like we do in this tutorial with SSOCircle, check [our docs](https://auth0.com/docs/saml-configuration) to see if your next steps are up to you).

Once you have done this, you can test your new SAML connection in the Dashboard. Go to 'Connections' > 'Enterprise', then select 'SAMLP Identity Provider'. Next to your connection name, you should see a play icon. Click it to try your SAML login from the dashboard. If this works, you are ready to log in using SAML authentication in your Auth0 app!

With just a few minutes and no code changes, we have incorporated a SAML SSO into our Auth0 app! Want to learn more? [try our free plan](https://auth0.com/pricing), and you can checkout the [30+ social IdPs](https://auth0.com/docs/identityproviders#social) and the [enterprise IdPs](https://auth0.com/docs/identityproviders#enterprise) that we support.

I'm Kassandra from Auth0, and thanks for reading!

[Want to learn more about Single Sign-On? Get The Definitive Guide on SSO (74-page free eBook) here.](https://resources.auth0.com/definitive-guide-to-single-sign-on/?utm_source=blog)


Switching from Social Authentication to SAML in Minutes with Auth0

ryan-chenkie

Ryan is a full-stack JavaScript developer and trainer who mainly works with React, Angular, Node, and GraphQL. He runs a consultancy where he builds apps for companies and also helps established dev teams with their modern JavaScript challenges.<br /><br />Ryan is a Google Developer Expert, the host of the Entrepreneurial Coder Podcast, the author of Securing Angular Applications, and an all-around fanatic about application security.

Developer

Ryan Chenkie

Learn about Google's Accelerated Mobile Pages project and how to build a sample AMP page in this tutorial.



---

**TL;DR:** Google has just released its Accelerated Mobile Pages (AMP) project, a library that provides custom components for making websites very fast. It takes a prescriptive approach that puts tight restrictions on developers but promises great speed gains. In this article, we take a look at some of AMP's features and build a demo page. Check out the [repo](https://github.com/auth0/amp-example) to get the code for this tutorial and the [AMP project](https://github.com/ampproject/amphtml) for docs and further info. You can also check out the [live demo](http://auth0.github.io/amp-example/).

---

It's easy for sites with rich content to run into performance issues on mobile devices. If you've ever browsed a content site that has a heavy footprint on desktop, chances are, the site wasn't the fastest you've ever visited when you viewed it on your phone or tablet.

Google's [Accelerated Mobile Pages (AMP)](https://www.ampproject.org/) project aims to solve these issues and make the user's browsing experience "instant", especially on resource-constrained mobile devices. The AMP project relies on existing standards and current technologies, so how exactly does it accomplish better performance? Largely by *restricting* what developers are able to incorporate into their sites. AMP also provides its own implementations for many commonly used features, which ensures that the features are optimized according to the AMP spec.

The AMP runtime JavaScript also takes care of a bunch of optimizations. These are things like loading only the content that is above the fold first and prioritizing or delaying image loading, among others.

## Accelerated Mobile Pages (AMP) Limitations

Because AMP imposes many restrictions on us with the aim of making content sites really fast, it might be good to start off by going over what we *can't* do in it.

Here's a non-exhaustive list:

1. No developer-written or third-party JavaScript
2. No input elements of any kind, including standard `input` and `textarea`
3. No external style sheets and only one `style` tag in the document head
4. No inline styles
5. Style rules must be at or below 50kb

That's quite a large set of restrictions, and we're just scratching the surface! While it might seem a bit *too* restrictive, there are good reasons for these limitations. Remember, AMP is all about **content** sites. There are many sites out there that force users to download heaps of JavaScript and CSS just for some simple animations or UI elements, which they could easily optimize or do without. Also, because most content sites simply display text and images (things like comment areas notwithstanding), the bet is that there isn't a huge need for input elements.

## AMP Components

AMP comes with a small set of custom components to provide ways of implementing commonly needed features. It does so with custom elements that coordinate JavaScript execution (where applicable) and generally optimize performance. For example, the `amp-img` tag replaces the standard HTML `img` tag, and the reason is that `amp-img` can let the browser manage delaying or prioritizing image loading, depending on the position of the viewport and other factors. If an image is outside of the current view, the page can be sped up by not requiring it immediately.

<include src="TweetQuote" quoteText="AMP comes with a small set of custom components to provide ways of implementing commonly needed features."/>

AMP also provides extended components that can be requested from separate JS files to do even more. Here's a list of both the core and extended AMP components:

`amp-img` `amp-audio` `amp-pixel` `amp-video` `amp-carousel` `amp-lightbox` `amp-ad` `amp-anim` `amp-iframe` `amp-instagram` `amp-twitter` `amp-youtube`

## The AMP Validator

We've gone over some of the restrictions that AMP puts on us to accomplish better performance, but how are these restrictions enforced? If we put disallowed markup or include our own scripts, the page will still render, but of course, we will be breaking the AMP rules. To help us see when we break the rules, AMP provides a **validator** that will let us know in the console what we've done wrong. To enable the validator, we simply need to browse our site with `#development=1` appended to the end of the URL.

## Let's Build an AMP Page

Let's see how we can use some of AMP's features by building our own site. We'll get a look at some of the core and extended features, but we won't be able to cover everything.

### Required HTML

The first step is to create an AMP HTML document and include the AMP project JavaScript. AMP HTML documents are denoted with the tag `<html ⚡>`, but you can also use `<html amp>`.

```html
<!doctype html>
  <html ⚡>
    <head>
      <meta charset="utf-8">
      <title>Auth0 AMP</title>
      <link rel="canonical" href="index.html">
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    </head>
    <body>

    </body>
  </html>
```

It's important to note that everything we've included here is **required** for an AMP page. Why are we hiding the `body` element for JavaScript-enabled browsers? For optimization and UX. The AMP JavaScript needs to be responsible for rendering the page to ensure the best experience.

The `canonical` link is there to point to a non-AMP version of the site if one exists, but if there isn't one, we can just point the document to itself.

### Styles

All styles must go in a `style` tag within the `head` of the document, which must contain the `amp-custom` attribute.

```html
...

  <style amp-custom>

    /* Styles here */

  </style>
```

We won't write out all of the styles for this example page here, but you can [get them on GitHub](https://github.com/auth0/amp-example) if you'd like

### Images

Next, let's put in a header image and title line.

```html
...

  <header class="header-image">
    <amp-img
      src="https://cdn.auth0.com/website/jobs/team_2.jpg"
      layout="responsive"
      width="2000"
      height="1035"
      alt="Team">
    </amp-img>

    <div class="title-section">
      <h1>A Token Walks Into a SPA</h1>
      <div class="author">
        <amp-img
          src="https://www.gravatar.com/avatar/df6c864847fba9687d962cb80b482764??s=250"
          alt="Gonto"
          width="80"
          height="80">
        </amp-img>
        <span>By: Gonto &middot; October 12, 2015</span>
      </div>
    </div>
  </header>

...
```

We're using the core `amp-img` tag for all of our images. AMP needs to know about the height of each image (and all external media resources) before the page loads, so we provide these on the `amp-img` tag.

![amp accelerated mobile pages](https://images.ctfassets.net/23aumh6u8s0i/3xcwxJQYlJuqdJreIR64Sa/8f913e450fea14c955a30654cf96039c/amp-1)

### Lightbox

Next, let's put some content and a lightbox in place.

```html
...

  <div class="content">    
      <article>
        <div class="section">
          <h2>A Token Walks into A SPA</h2>
          <p>
            Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio nobis, dolorem! Debitis, amet esse consequatur, est quasi hic ratione voluptatum sequi repudiandae rem illum repellendus tempore provident tenetur non. Voluptas.
          </p>

          <amp-lightbox id="lightbox" class="lightbox" layout="nodisplay">
            <div class="lightbox-content">
              <amp-img
                src="https://cdn.auth0.com/website/jobs/team_2.jpg"
                width="2000"
                height="1035"
                layout="responsive">
              </amp-img>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore id iusto culpa labore, laborum, vitae perferendis praesentium incidunt necessitatibus quasi officia, dicta atque harum aliquam rerum inventore quam tempora fugit?
              </p>
            </div>
          </amp-lightbox>

          <amp-img id="main-image"
              src="https://cdn.auth0.com/website/jobs/team_2.jpg"
              srcset="https://cdn.auth0.com/website/jobs/team_2.jpg"
              placeholder
              width="2000" height="1035"
              layout="responsive"
              on="tap:lightbox">
          </amp-img>

        </div>

...
```

This time, we're making use of `amp-lightbox` so that when a user clicks or taps on the image, a dark background is displayed behind it, and a caption shows up underneath. This is an external component, so we need to load it in separately. In the document head, let's add in the script reference:

```html
...

  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

...
```

The lightbox is initially hidden with `layout="nodisplay"`. Directly beneath the `amp-lightbox`, we have the same image coming through in an `amp-image` tag. It will be this image that is displayed on the screen initially, and then the lightbox image when the user clicks or taps it. We activate the lightbox with `on="tap:lightbox"` on the `amp-img` tag.

![amp accelerated mobile pages](https://images.ctfassets.net/23aumh6u8s0i/2zZkXcaXtV5cKHTBtMCRfQ/3031372948bd7431c1fd5b1a079506e8/amp-2)

![amp accelerated mobile pages](https://images.ctfassets.net/23aumh6u8s0i/6IAgHFLoYO2rmA9llNvU0y/17229c723cbce717cc762c0ec76d785e/amp-3)

### Advertisements

Many content sites keep the lights on with revenue generated by ads. Because ad placement providers rely on JavaScript to do their thing, AMP provides components for many of the popular ones. Currently supported providers include the following:

- A9
- AdReactor
- AdSense
- AdTech
- Doubleclick

We can place ads on our page much like we normally would, but this time, we use the `amp-ad` component.

```html
...

  <div class="ad-container">

    <amp-ad width="320" height="250"
        type="adsense"
        data-ad-client="ca-pub-8125901705757971"
        data-ad-slot="7783467241">
    </amp-ad>

    <amp-ad width="320" height="250"
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner">
    </amp-ad>

  </div>

...
```

We specify which provider we want on the `type` attribute and then set up some other attributes that are specific to that provider.

![amp accelerated mobile pages](https://images.ctfassets.net/23aumh6u8s0i/2hdnneTmUtm2VNJH5cZeM5/88cce9cab2221cf94ccaf23a820861fa/amp-4)

### Videos

AMP gives us a component called `amp-video` for embedding generic video. We can also use the `amp-youtube` component to call on any YouTube video directly in the HTML. Let's pull in Gonto's ng-vegas talk video.

```html
...

  <div class="section">
    <h2>Video</h2>
    <p>
      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
    </p>
    <amp-youtube
        video-id="pgFtp2LgwoE"
        layout="responsive"
        width="480" height="270">
    </amp-youtube>
  </div>

...
```

We are able to specify the slug of the video we want on the `video-id` attribute.

Again, because this is an extended component, we need to bring in the AMP JavaScript for it. Let's load that in the `head`.

```html
...

  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

...
```

![amp accelerated mobile pages](https://images.ctfassets.net/23aumh6u8s0i/6HYTFRYN5AyG3moNU5DrUJ/a3f860dab82965f1cefed6db14c80991/amp-5)

### Carousels

The final extended component that we'll see is `amp-carousel` for creating a simple and fast image rotator.

```html
...

  <div class="section">
    <h2>Pictures</h2>

    <amp-carousel id="main-carousel" width="400" height="300" type="slides">
      <amp-img
        src="https://www.jsconfar.com/static/images/speakers/workshop-gonto.jpeg"
        width="400"
        height="400">
      </amp-img>
      <amp-img
        src="https://c2.staticflickr.com/6/5758/20330662003_d444cd54d0.jpg"
        width="500"
        height="333">
      </amp-img>
      <amp-img
        src="http://i.ytimg.com/vi/fWar75R1NGo/hqdefault.jpg"
        width="480"
        height="360">
      </amp-img>
    </amp-carousel>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, laudantium id commodi quod sunt quidem sed quam, corporis itaque consequatur, quo reprehenderit nemo. Corporis quidem accusantium minus cumque nemo nisi.
    </p>
  </div>

...
```

The carousel works by wrapping `amp-img` tags within an `amp-carousel` tag. After that, everything is pretty much the same. We'll also need the JavaScript for this component.

```html
...

  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

...
```

![amp accelerated mobile pages](https://images.ctfassets.net/23aumh6u8s0i/117B8HJc8EOOQzUbG3oTiM/63c9f37550f740cbe3312d50f590ea33/amp-6)

The carousel comes with some default arrows to move left and right, but what if we wanted to put our own in? These arrows are SVG elements, and we can easily change the SVG up with something of our own with some CSS.

An example of the override from the [AMP project docs](https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md):

```css
.amp-carousel-button-prev {
  left: 5%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>');
}
```

Again, we haven't included the styles for this sample page above, but they are included with the [tutorial repo](https://github.com/auth0/amp-example). You can also see the completed example by viewing the [live demo](http://auth0.github.io/amp-example/).

## Aside: Using Auth0 with your AMP Pages is Easy

Even content sites often require authentication. As was mentioned, we can't put input elements in an AMP document, nor can we use any custom JavaScript. Because of this, it will be necessary to have a login page or box that redirects to an AMP document that is content only.

This can be done in less than 10 minutes using [Auth0](https://auth0.com)'s hosted login box. For example, if your account name is `samples`, you can just link people to `https://samples.auth0.com/login?client=BUIJSW9x60sIHBw8Kd9EmCbj8eDIFxDC&redirect_uri=YOUR_AMP_APP` and replace the `YOUR_AMP_APP_URL` with the correct one. Once the user authenticated successfully, you'll get a [JWT](https://auth0.com/learn/json-web-tokens/) in your AMP app, with which you can do authenticated requests to your API :boom:. Check out an [existing Login box here](https://samples.auth0.com/login?client=BUIJSW9x60sIHBw8Kd9EmCbj8eDIFxDC). Time to <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">signup to your Auth0 account!</a>

## Wrapping Up

As we've seen, AMP puts a lot of restrictions on us and requires that we use special components for things like images, video, and ads. This is all for the sake of making sites faster, and the AMP project has stated that it has observed [speed improvements of 15% to 85%](https://www.ampproject.org/how-it-works/). This would certainly be a welcome enhancement for end users of many content sites, especially mobile users. However, as developers, it could be said that AMP is just too limiting for us to use in our projects. [Some have even expressed](https://twitter.com/DurandalJS/status/652499040815464448) that a Google-specific way of writing the web is ultimately bad for it.

I think AMP is an interesting project that will work well in acheiving a faster browsing experience for users of content sites. While we should be writing efficient pages by dropping JavaScript that isn't needed, paying attention to how our scripts are loaded, and generally just be doing better house-keeping, it's becoming harder to do that with the modern web. For many, it's ultimately easier to follow a prescription for how to make sites faster than it is to be disciplined enough to follow best-practices. At the same time, there is a part of me that feels as if we should just do a better job of getting back to basics with our sites, which would solve a lot (albeit perhaps not all) of the issues that AMP is aiming to solve.


AMP Pages: What's the Fuss with Google's Accelerated Mobile Pages?

b93af62499ed0f76f280acb37913f15d

Hernan Zalazar

In this tutorial, learn how to use Google Smart Lock, a service that makes handling user's credentials on Android a pain-free process.

----

**TL;DR:** Get a sample Android app with Smart Lock configured and ready to use from [this Github repository](https://github.com/auth0/Lock-SmartLock/tree/master/app).

----


Members of our team participated in the last Google I/O to learn about the latest trends. There were a lot of cool new things announced, but these two particularly caught our eyes: **Android Fingerprint Support** & **Smart Lock for Passwords**. In this blog post, we’ll focus on the latter.

**Smart Lock for Passwords** is a service that makes handling your user’s credentials a pain-free process. It also allow friction-free log-in and sign-up for your web & Android apps. In other words, the idea is that you never have to remember your passwords again :). Have you heard about [1Password](https://agilebits.com/onepassword) or [LastPass](https://lastpass.com/)? Well, imagine that, but from Google.

If you’re writing a WebApp, password management can be handled by Chrome itself. However, for Android apps. you need to do some extra work to add it. After playing around with the samples, we decided that it would be great to integrate it with our **Lock for Android** to make it even easier to authenticate your users and keep their credentials safe. With that in mind, we created a new library [Lock-SmartLock](https://github.com/auth0/Lock-SmartLock). In this blog post, we’ll learn how to use it!



## Before we start

First, you need to make sure you have updated *Google Play services* in your Android SDK installation. (You can update it using Android SDK Manager)

Then, follow [this guide](https://developers.google.com/identity/smartlock-passwords/android/get-started#configure_your_console_name_project) to configure your [Google Developers Console](https://console.developers.google.com/) project and associate it with your Android application so it can use SmartLock API.

> In order to use **Lock-SmartLock**, you’ll need to create an Auth0 application. You can create one from [the Auth0 dashboard](https://manage.auth0.com/#/applications)

## Let’s add Lock & SmartLock

### Configuring Lock-Smartlock

First, add **Lock-SmartLock** to your `build.gradle` file.

```gradle
compile ‘com.auth0.android:appcompat-v7:22.2.0’
```

Then, in your `res/values` folder, create a resource file named `auth0.xml` that will include your Auth0 credentials:

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="auth0_client_id">{YOUR_CLIENT_ID}</string>
    <string name="auth0_domain_name">{YOUR_DOMAIN}</string>
    <string name="auth0_scheme">a0{YOUR_CLIENT_ID_LOWERCASE}</string>
</resources>
```

In order to authenticate the user, **Lock** needs access to the Internet. Let’s request that permission in your `AndroidManifest.xml`:

```xml
<uses-permission android:name="android.permission.INTERNET"/>
```

### Implementing Lock-Smartlock
Now it’s time to register **Lock for Android** and **Google Play services** for your application in your `AndroidManifest.xml`:

```xml
  
  <activity
      android:name="com.auth0.lock.LockActivity"
      android:theme="@style/Lock.Theme"
      android:label="@string/app_name"
      android:screenOrientation="portrait"
      android:launchMode="singleTask">
      <intent-filter>
          <action android:name="android.intent.action.VIEW"/>
          <category android:name="android.intent.category.DEFAULT"/>
          <category android:name="android.intent.category.BROWSABLE"/>
          <data android:scheme="@string/auth0_scheme" android:host="@string/auth0_domain_name"/>
      </intent-filter>
  </activity>
  <meta-data android:name="com.auth0.lock.client-id" android:value="@string/auth0_client_id"/>
  <meta-data android:name="com.auth0.lock.domain-url" android:value="@string/auth0_domain_name"/>
  

  <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />
```

Then, we need to create a custom class that extends from `android.app.Application` and implements `LockProvider`. In this class, we’ll create an instance of `SmartLock` and store it so that we can use it from any `Activity`.

```java
public class MyApplication extends Application implements LockProvider {

    private Lock lock;

    @Override
    public void onCreate() {
        super.onCreate();
        lock = new SmartLock.Builder(this)
                .loadFromApplication(this)
                .build();
    }

    @Override
    public Lock getLock() {
        return lock;
    }

}
```

> Remember to register this class as your application class in the `AndroidManfifest.xml`, too.
 
Then, in the Activity that will trigger authentication, override the following lifecycle callbacks that will allow **Lock** to interact with **Smart Lock**:

```java
@Override
protected void onStart() {
    super.onStart();
    SmartLock.getSmartLock(this).onStart();
}

@Override
protected void onStop() {
    super.onStop();
    SmartLock.getSmartLock(this).onStop();
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    SmartLock.getSmartLock(this).onActivityResult(this, requestCode, resultCode, data);
}
```

> The layout of the Activity is up to you; we only need a way to trigger the authentication (either a button or automatically from code).

Then, we need to create a `BroadcastReceiver` to handle the events broadcasted by **Lock** when the user authenticates:

```java
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //... Setup your Activity
    broadcastManager = LocalBroadcastManager.getInstance(this);
    broadcastManager.registerReceiver(authenticationReceiver, new IntentFilter(Lock.AUTHENTICATION_ACTION));
}

@Override
protected void onDestroy() {
    super.onDestroy();
    //... Clean up your Activity
    broadcastManager.unregisterReceiver(authenticationReceiver);
}

private BroadcastReceiver authenticationReceiver = new BroadcastReceiver() {
    @Override
    public void onReceive(Context context, Intent intent) {
        UserProfile profile = intent.getParcelableExtra(Lock.AUTHENTICATION_ACTION_PROFILE_PARAMETER);
        Token token = intent.getParcelableExtra(Lock.AUTHENTICATION_ACTION_TOKEN_PARAMETER);
    }
};
```

Finally, in order to authenticate the user, you just call the following method method inside your Activity

```java
SmartLock.getSmartLock(this).loginFromActivity(this);
```

Connect your device, and run the app. You’ll see something like this:

![smartlock-android](https://cdn.auth0.com//blog/smartlock-android.gif)

That’s it all, you have successfully integrated **Auth0** and **SmartLock**!

Congrats ;)

Using Smart Lock on Android in 3 simple steps

Jose-Romaniello

I started working at Auth0 before the first line of code for our authentication platform existed. I’ve been able to go through the journey of seeing our ideas go from prototype to living production code that impacts millions of people. It’s satisfying to know that my actions here are having a positive impact in solving problems for developers like me.

Head of Engineering

Jose Romaniello

We are moving from the deprectad Google Apps Provisioning API to the new Google Apps Directory API. This will affect you only if you are using Google Apps

We are moving from the deprectad [Google Apps Provisioning API](https://developers.google.com/google-apps/provisioning/) to the new [Google Apps Directory API](https://developers.google.com/admin-sdk/directory/).

__This will affect you only if you are using Google Apps and the `/users` endpoints of Auth0.



Google Apps Provisioning API has been deprectated few months ago, on the other hand the new API has some advantages like providing a public link for the profile photo and having more granular scopes.

__Previously permisive scope:__

![Previously permisive scope](https://images.ctfassets.net/23aumh6u8s0i/3wuKxrpfLUFTc3LD0aQkIF/3d525ed21b52a54e3a13952b26e3d024/ss-2013-09-27T15-17-16_safe_save_152024)

__New granular scope:__

![New granular scope](https://images.ctfassets.net/23aumh6u8s0i/7z5aAUF5nxsGvc5nj89Jfk/0574a0241ddeb95497c0da8907e9e5d4/ss-2013-09-27T15-25-52_safe_save_152637)

In order to have access to this API enable the "Admin SDK" service in the [Google API Console](https://code.google.com/apis/console) as follows:

![ss-2013-09-27T15-33-02.png](https://images.ctfassets.net/23aumh6u8s0i/7LlyKqhK8xS3sQ52fGWrEt/e4bcb84972a7c064dd18ea2f40ed4465/ss-2013-09-27T15-33-02)

New __Google Apps Connections__ will automatically use this new API and pre-existing connections will need to be re-provisioned by following the provisioning link. If you are the domain administrator follow this link, if not copy and send the link to the domain admin:

![](https://dl.dropbox.com/s/6hojv2cdhl1sw6i/ss-2013-09-27T15-28-44.png)

Until you have done this step, the `/users` endpoint will return only the users that have signed in to your app at least once.

Moving to Google Apps Directory API

eugenio-pace-new-avatar

Pace co-founded Auth0 in early 2013 with CTO and “brother-in-arms” Matias Woloski while living 7,000 miles apart from each other. Since then, Pace has played an instrumental role in growing Auth0 into a leading identity management company that is loved by developers and trusted by global enterprises. He loves traveling and has visited more than 35 countries for business and pleasure. He currently lives in Redmond, Washington with his wife, two sons, and their labrador retriever. In his spare time, he enjoys the outdoors, rowing, riding bikes, spending time with his family, restoring his 1970 Karmann Ghia, writing his blog, and reading history and philosophy.

CEO and Co-Founder

Eugenio Pace

A few days ago we released integration between Auth0 and New Relic. You can now login to New Relic with your Github, Google, Amazon, Twitter, Active Directory

A few days ago we released integration between [Auth0](http://developers.auth0.com/newrelic) and [New Relic](http://newrelic.com/auth0). You can now login to New Relic with your Github, Google, Amazon, Twitter, Active Directory or LDAP accounts. [See here for a complete list of supported identity providers in Auth0](http://docs.auth0.com/identityproviders): Consumer and Enterprise.

As with other integrations we have published, setup takes just a few minutes and it is straight-forward:

### Add New Relic from the dashboard:

![](https://images.ctfassets.net/23aumh6u8s0i/29zM6x62oj9AjgSzxKSdrr/03590a98d87624844943f67fb8ff52b0/newrelic-create)



### Enter your New Relic Account and follow a few simple steps:

![](https://images.ctfassets.net/23aumh6u8s0i/6lsrh4GtJ6KwldsocrXQEb/00af68613b1a83c262eda897b1bc7c51/newrelic-tutorial)

Here's a quick end to end demo that shows login into New Relic with a Github account (use full screen):

<iframe width="710" height="399" src="//www.youtube.com/embed/pmMkm0Zh2o0?rel=0&vq=hd1080" frameborder="0" allowfullscreen></iframe>

And the best news: __New Relic integration is free for all our editions.__

[Try Auth0 yourself!](https://auth0.com)

SSO with New Relic

Auth0 is about making identity simple. And even simpler for the most common and recurrent scenarios. One such scenario is a company that is using SharePoint

Auth0 is about making identity simple. And even simpler for the most common and recurrent scenarios.

One such scenario is a company that is using __SharePoint on-premises__ and has moved e-mail to __Office365__. They might not yet be ready for using SharePoint in the cloud (e.g. don't have the time for a migration to the cloud, or need more advanced customization than what Office365 offers).

![SharePoint Federation](https://images.ctfassets.net/23aumh6u8s0i/6eR38qGF4BlzozrierXIuk/8e4b6f32c1ef4440ccf202fdc02f77d0/auth0-sp-O365-goog)

With Auth0 this is straight forward, as we support SharePoint out of the box. You simply need 2 lines of JavaScript to initiate login (using __Auth0 Login Widget__).



![](https://images.ctfassets.net/23aumh6u8s0i/xdbrKOhApW8rIC83La6dE/f9ea85c2d3ccba435d28ad6ac9273915/auth0-sp-login-widget)

This has an additonal benefit: now you can also open your SharePoint to other organizations that need to collaborate with you. You don't need to create or manage their credentials yourself anymore.

This short demo shows exactly this scenario:

-1. Tom, an employee in Fabrikom logs-in into SharePoint with his Office365 credentials.
-2. A partner of Fabrikom, logs in with his Gmail account.

<iframe width="700" height="525" src="https://www.youtube.com/embed/QXpjouNt9XM?rel=0" frameborder="0" allowfullscreen></iframe>

In the next post we will cover a natural extension of this first scenario: federating with a partner company using Active Directory.

[Try Auth0 yourself!](https://auth0.com)

"google"