The Auth package facilitates authentication in your application using JSON Web Tokens (JWT). It employs express-jwt
for stateless authentication, handling accessToken
and refreshToken
for web applications via Cookies and mobile applications using @capacitor/preferences.
Since the accessToken
and refreshToken
generated, default accessToken
will be valid 60 minutes and refreshToken
7 days and your refreshToken will be saved into the database.
To integrate the Auth package, follow these steps:
- Wrap your routes with
<ProvideAuth>
component. Define theuserType
andaccountType
and any additionalavailableAccountTypes
.
import {FreeAccount} from 'lincd-dating/lib/shapes/FreeAccount';
import {Person} from 'lincd-dating/lib/shapes/Person';
import {PaidAccountTier1} from 'lincd-dating/lib/shapes/PaidAccountTier1';
<ProvideAuth
userType={Person}
accountType={FreeAccount}
availableAccountTypes={[PaidAccountTier1]}
>
{/* Your application code */}
</ProvideAuth>;
- Set the environment variables
AUTH_ACCOUNT_TYPE
andAUTH_USER_TYPE
to match the types imported in theProvideAuth
component.
"AUTH_ACCOUNT_TYPE": "lincd-dating/lib/shapes/FreeAccount",
"AUTH_USER_TYPE": "lincd-dating/lib/shapes/Person",
Import the useAuth hook in your page to access functions like signin
, validateToken
, and signout
.
import {useAuth} from 'lincd-auth/lib/hooks/useAuth';
import {FreeAccount} from 'lincd-dating/lib/shapes/FreeAccount';
import {Person} from 'lincd-dating/lib/shapes/Person';
const auth = useAuth<Person, FreeAccount>();
// Person Shapes
const user = auth.user;
// UserAccount Shapes
const userAccount = auth.userAccount;
// example OAuth signin method
Since user signout, the process is all the tokens will be remove from cookies, storages and databases.
import {useAuth} from 'lincd-auth/lib/hooks/useAuth';
import {Person} from 'lincd-dating/lib/shapes/Person';
import {FreeAccount} from 'lincd-dating/lib/shapes/FreeAccount';
const auth = useAuth<Person, FreeAccount>();
<button onClick={() => auth.signout()}>
If you want to redirect the user to specific pages upon authentication, you can use the validateToken
function.
useEffect(() => {
const validateToken = async () => {
const validToken = await auth.validateToken();
if (validToken) {
// navigate when the token is valid
} else {
// navigate to the signin page
}
};
validateToken();
}, []);
When a user is authenticated, the request on the server will be updated. This example usage of retrieving user information from the request in the backend.
import {BackendProvider} from 'lincd-server-utils/lib/utils/BackendProvider';
import {Person} from 'lincd-dating/lib/shapes/Person';
import {FreeAccount} from 'lincd-dating/lib/shapes/FreeAccount';
export default class SPBackendProvider extends BackendProvider {
getProfiles() {
// get linkedAuth from request
const auth = this.request.linkedAuth;
// if the user has successfully signed in, "auth" will be available.
// and if not, return false.
if (!auth) {
console.warn('No user authenticated.');
return false;
}
const user = auth.userAccount.accountOf as Person;
const userAccount = auth.userAccount as FreeAccount;
// now you can use 'user' and 'userAccount' in your backend logic
// ...
}
}
Make sure to install an email client, like lincd-zeptomail
.
So that emails like 'forgot password' and 'verify email' can be sent from the backend.
To enable reset password, define a route for the reset password callback component in your app:
reset_password_callback: {
path: '/auth/reset-password',
component: lazy(
() =>
import(
'lincd-auth/lib/components/ForgotPasswordCallback' /* webpackPrefetch: true */
),
),
},