feat(ajustes): add API tokens management UI for OpenSheets Companion

Add a new "Dispositivos" tab in settings page that allows users to:
- Generate new API tokens for connecting Android devices
- View connected devices with last used time and IP
- Revoke tokens to disconnect devices

This provides the web UI needed for users to obtain tokens
for the OpenSheets Companion Android app.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-01-23 13:02:00 +00:00
parent 97662d5d34
commit b2ba3efd63
3 changed files with 521 additions and 3 deletions

View File

@@ -2,12 +2,13 @@
import { auth } from "@/lib/auth/config";
import { db, schema } from "@/lib/db";
import { pagadores } from "@/db/schema";
import { apiTokens, pagadores } from "@/db/schema";
import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
import { eq, and, ne } from "drizzle-orm";
import { eq, and, ne, isNull } from "drizzle-orm";
import { headers } from "next/headers";
import { revalidatePath } from "next/cache";
import { z } from "zod";
import { createHash, randomBytes } from "crypto";
type ActionResponse<T = void> = {
success: boolean;
@@ -412,3 +413,150 @@ export async function updatePreferencesAction(
};
}
}
// API Token Actions
const createApiTokenSchema = z.object({
name: z.string().min(1, "Nome do dispositivo é obrigatório").max(100),
});
const revokeApiTokenSchema = z.object({
tokenId: z.string().uuid("ID do token inválido"),
});
function generateSecureToken(): string {
const prefix = "os";
const randomPart = randomBytes(32).toString("base64url");
return `${prefix}_${randomPart}`;
}
function hashToken(token: string): string {
return createHash("sha256").update(token).digest("hex");
}
export async function createApiTokenAction(
data: z.infer<typeof createApiTokenSchema>
): Promise<ActionResponse<{ token: string; tokenId: string }>> {
try {
const session = await auth.api.getSession({
headers: await headers(),
});
if (!session?.user?.id) {
return {
success: false,
error: "Não autenticado",
};
}
const validated = createApiTokenSchema.parse(data);
// Generate token
const token = generateSecureToken();
const tokenHash = hashToken(token);
const tokenPrefix = token.substring(0, 10);
// Save to database
const [newToken] = await db
.insert(apiTokens)
.values({
userId: session.user.id,
name: validated.name,
tokenHash,
tokenPrefix,
expiresAt: null, // No expiration for now
})
.returning({ id: apiTokens.id });
revalidatePath("/ajustes");
return {
success: true,
message: "Token criado com sucesso",
data: {
token,
tokenId: newToken.id,
},
};
} catch (error) {
if (error instanceof z.ZodError) {
return {
success: false,
error: error.issues[0]?.message || "Dados inválidos",
};
}
console.error("Erro ao criar token:", error);
return {
success: false,
error: "Erro ao criar token. Tente novamente.",
};
}
}
export async function revokeApiTokenAction(
data: z.infer<typeof revokeApiTokenSchema>
): Promise<ActionResponse> {
try {
const session = await auth.api.getSession({
headers: await headers(),
});
if (!session?.user?.id) {
return {
success: false,
error: "Não autenticado",
};
}
const validated = revokeApiTokenSchema.parse(data);
// Find token and verify ownership
const [existingToken] = await db
.select()
.from(apiTokens)
.where(
and(
eq(apiTokens.id, validated.tokenId),
eq(apiTokens.userId, session.user.id),
isNull(apiTokens.revokedAt)
)
)
.limit(1);
if (!existingToken) {
return {
success: false,
error: "Token não encontrado",
};
}
// Revoke token
await db
.update(apiTokens)
.set({
revokedAt: new Date(),
})
.where(eq(apiTokens.id, validated.tokenId));
revalidatePath("/ajustes");
return {
success: true,
message: "Token revogado com sucesso",
};
} catch (error) {
if (error instanceof z.ZodError) {
return {
success: false,
error: error.issues[0]?.message || "Dados inválidos",
};
}
console.error("Erro ao revogar token:", error);
return {
success: false,
error: "Erro ao revogar token. Tente novamente.",
};
}
}

View File

@@ -1,3 +1,4 @@
import { ApiTokensForm } from "@/components/ajustes/api-tokens-form";
import { DeleteAccountForm } from "@/components/ajustes/delete-account-form";
import { UpdateEmailForm } from "@/components/ajustes/update-email-form";
import { UpdateNameForm } from "@/components/ajustes/update-name-form";
@@ -7,7 +8,8 @@ import { Card } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { auth } from "@/lib/auth/config";
import { db, schema } from "@/lib/db";
import { eq } from "drizzle-orm";
import { apiTokens } from "@/db/schema";
import { eq, desc } from "drizzle-orm";
import { headers } from "next/headers";
import { redirect } from "next/navigation";
@@ -42,11 +44,28 @@ export default async function Page() {
// Se o providerId for "google", o usuário usa Google OAuth
const authProvider = userAccount?.providerId || "credential";
// Buscar tokens de API do usuário
const userApiTokens = await db
.select({
id: apiTokens.id,
name: apiTokens.name,
tokenPrefix: apiTokens.tokenPrefix,
lastUsedAt: apiTokens.lastUsedAt,
lastUsedIp: apiTokens.lastUsedIp,
createdAt: apiTokens.createdAt,
expiresAt: apiTokens.expiresAt,
revokedAt: apiTokens.revokedAt,
})
.from(apiTokens)
.where(eq(apiTokens.userId, session.user.id))
.orderBy(desc(apiTokens.createdAt));
return (
<div className="w-full">
<Tabs defaultValue="preferencias" className="w-full">
<TabsList>
<TabsTrigger value="preferencias">Preferências</TabsTrigger>
<TabsTrigger value="dispositivos">Dispositivos</TabsTrigger>
<TabsTrigger value="nome">Alterar nome</TabsTrigger>
<TabsTrigger value="senha">Alterar senha</TabsTrigger>
<TabsTrigger value="email">Alterar e-mail</TabsTrigger>
@@ -74,6 +93,22 @@ export default async function Page() {
</Card>
</TabsContent>
<TabsContent value="dispositivos" className="mt-4">
<Card className="p-6">
<div className="space-y-4">
<div>
<h2 className="text-lg font-bold mb-1">OpenSheets Companion</h2>
<p className="text-sm text-muted-foreground mb-4">
Conecte o app Android OpenSheets Companion para capturar
automaticamente notificações de transações financeiras e
enviá-las para sua caixa de entrada.
</p>
</div>
<ApiTokensForm tokens={userApiTokens} />
</div>
</Card>
</TabsContent>
<TabsContent value="nome" className="mt-4">
<Card className="p-6">
<div className="space-y-4">