@everipedia/iq-login is a package that provides easy integration of IQ.wiki login functionality into your Next.js applications. It allows users to authenticate using their crypto wallet and web3auth with rainbow kit seamlessly.
To install the package, run:
pnpm install @everipedia/iq-login [email protected] [email protected] @rainbow-me/[email protected]- Add the package to your Tailwind CSS configuration:
// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: [
// ... other content paths
"./node_modules/@everipedia/iq-login/**/*.{js,jsx,ts,tsx}",
],
// ... rest of your Tailwind config
};
export default config;
2. Wrap your application with the IqLoginProvider in your layout file:
```tsx
// app/layout.tsx
import { RainbowKitClientProvider } from "@everipedia/iq-login";
import { polygon } from 'wagmi/chains';
import { headers } from "next/headers";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const cookie = (await headers()).get("cookie") || "";
return (
<html lang="en">
<body>
<IqLoginProvider
chain={polygon} // Required: Specify the chain to use
web3AuthProjectId="YOUR_PROJECT_ID" // Required: Web3Auth Project ID
cookie={cookie}
>
{children}
</IqLoginProvider>
</body>
</html>
);
}- Add login page to your application. Note: You need to import rainbowkit styles in your application.
// app/login/page.tsx
import { Login } from '@everipedia/iq-login';
import "@rainbow-me/rainbowkit/styles.css"; // NOTE: For pages router this should be in _app.tsx
const LoginPage = () => {
return (
<div>
<Login />
</div>
);
};
export default LoginPage;The package provides a custom hook called useAuth that can be used to get the current user's information. It can be used to re-sign token, get the current token, and check if the user is authenticated.
Note: This hook automatically calls signToken on mount. it prompts the user to sign the token if the token is not signed and the user is connected.
// components/my-component.tsx
import { useAuth } from '@everipedia/iq-login';
function MyComponent() {
const { token, loading, reSignToken, error, logout } = useAuth();
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
if (token) {
return <div>Authenticated! Token: {token}</div>;
}
return (
<div>
<button onClick={reSignToken}>Re-Sign Token</button>
{token && <button onClick={logout}>Logout</button>}
</div>
);
}The package includes a getAuth function that can be used to retrieve the authentication token and address. Here's how you can use it:
import { getAuth } from '@everipedia/iq-login';
const { token, address } = await getAuth();
if (token && address) {
console.log('User is authenticated');
console.log('Token:', token);
console.log('Address:', address);
} else {
console.log('User is not authenticated');
}
This function retrieves the authentication token from cookies and verifies it. If the token is valid, it returns both the token and the associated address.The package is designed to work with Tailwind CSS and Shad-cn Theme. Make sure to add the shad-cn theme to your project. You can learn more about it here: https://ui.shadcn.com/themes
- Add the package in transpilePackages in your next.config.js file.
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
transpilePackages: ["@everipedia/iq-login"]
};
export default nextConfig;- Add the rainbowkit styles in your _app.tsx file.
// _app.tsx
import "@rainbow-me/rainbowkit/styles.css";